无法在离子3的Map上显示多个标记

Question

我试图在ionic3中的谷歌地图上显示多个标记，但我遇到了这个错误**当我试图从JSON文件中获取长度和纬度时，无法在家中读取未定义**的属性'length'。ts我在JSON文件中有经度和纬度值，所以它没有问题。我不知道为什么它会给我这个错误My Home.html代码是

<ion-content padding>
<div #map id="map" width="100%" height="100%"></div>  
</ion-content>

而我家的代码是

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
declare var google;

@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage { 
@ViewChild('map') mapContainer: ElementRef;
map: any;
museumList = [];

constructor(public navCtrl: NavController, public navParams: NavParams, public geolocation: Geolocation, public http: Http) {
this.http.get('assets/data/museum.json')
.map(res => res.json())
.subscribe(data => {
this.museumList = data.museums;
},
err => console.log("error is "+err), // error
() => console.log('read museum data Complete '+ this.museumList) 
);


}

ionViewDidLoad() {
this.displayGoogleMap();
this.getMarkers();
}
displayGoogleMap() {
let latLng = new google.maps.LatLng(28.6117993, 77.2194934);
let mapOptions = {
center: latLng,
disableDefaultUI: true,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
}
getMarkers() {
//i am getting error at this.museumList.lenght
for (let _i = 0; _i < this.museumList.length ; _i++) {
if(_i > 0 )
this.addMarkersToMap(this.museumList[_i]);
}
}
addMarkersToMap(museum) {
var position = new google.maps.LatLng(museum.latitude, museum.longitude);
var museumMarker = new google.maps.Marker({position: position, title: museum.name});
museumMarker.setMap(this.map);
}
}

非常感谢您的帮助。谢谢。

Answer 1

您可以在标记循环上传递纬度和经度这是地图上显示多个标记的完整工作代码

loadMap(lat,long){
let latLng = new google.maps.LatLng(lat, long);
let mapOptions = {
center: latLng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

var locations = [
['Sola', 23.0793864, 72.4921529],
['Shayona City', 23.0801729, 72.5360598],
['Axis Bank', 23.0808999, 72.5321389],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {  
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: this.map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(this.map, marker);
}
})(marker, i));
this.addMarker(this.map);
}


}

addMarker(map:any){
let marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: map.getCenter(),
draggable: true
});
let content = "<h4>You are here</h4>";
this.addInfoWindow(marker, content);

}
addInfoWindow(marker, content) {
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
google.maps.event.addListener(marker, 'dragend', function (event) {
console.log( this.getPosition().lat());
console.log( this.getPosition().lng());
});
}