无法在离子 3 中的地图上显示多个标记答案

【问题标题】：unable to show multiple markers on Map in ionic 3无法在离子 3 中的地图上显示多个标记
【发布时间】：2019-05-05 05:19:27
【问题描述】：

我试图在 ionic3 中的 Google 地图上显示多个标记，但出现此错误 ** 当我试图从JSON文件我在 JSON 文件中有经度和纬度值，所以没有问题。我不知道为什么它给了我这个错误我的 Home.html 代码是

<ion-content padding>

    <div #map id="map" width="100%" height="100%"></div>  

</ion-content>

而我的 home.ts 代码是

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);
}

}

感谢您的帮助。

【问题讨论】：

检查您的constructor 中的data.museums 是否是有效的Array。这是您修改museumList 的唯一行
在 data.museums 数组上获得“未定义”。
这意味着您的museum.json 中没有任何museums 属性
{ "museums": [ { "name": "National Museum", "state": "Delhi", "latitude": 28.6117993, "longitude": 77.2194934 }, { "name": “国家科学中心”，“州”：“德里”，“纬度”：28.6132098，“经度”：77.245437 }]}
检查路径是否正确，如果museums是顶级属性，...

标签： angular google-maps ionic-framework ionic3 angular6

【解决方案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());

    });

    }

【讨论】：