在 Google 地圖上添加多個標記

Question

我正在構建一個 Ionic 應用程序並嘗試在 Google 地圖上添加多個標記。 但是控制台日志說地圖未定義。 地圖已加載，但標記不會出現。 你能幫我嗎？

  ionViewDidLoad() {
    this.addMarkers();
  }

  ionViewWillLoad() {
    this.location = this.navParams.get('location');
    this.cityName = this.navParams.get('city');
    if (this.location) {
      this.longtitude = this.location.longtitude;
      this.latitude = this.location.latitude;
      this.getCityInformation();
      this.loadMap();
    }

  loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: this.latitude,
          lng: this.longtitude
        },
        zoom: 13,
        tilt: 0
      }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);
  }

  addMarkers() {
    this.places.forEach(function (place) {
      let options: MarkerOptions =
      {
        title: place.name,
        icon: 'blue',
        animation: 'DROP',
        position: {
          lat: place.location.latitude,
          lng: place.location.longtitude
        }
      };
      this.map.addMarker(options);
    })
  }

Answer 1

googleMapOption = {
    myMap: function(selector) {
        var mapProp = {
            center: new google.maps.LatLng(47.91882274682187, 106.91763639450073),
            zoom: 15,
        };
        map = new google.maps.Map(document.getElementById(selector), mapProp);
        map.addListener('click', function(event) {
            googleMapOption.addMarker(event.latLng);               
        });

    },
    addMarker: function(location) {
        this.deleteMarkers();
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        markers.push(marker);
    },
    setMapOnAll: function(map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    },
    showMarkers: function() {
        this.setMapOnAll(map);
    },
    deleteMarkers: function() {
        this.setMapOnAll(null);
        markers = [];
    }
}

---

嘗試這樣的事情

用法： googleMapOption.myMap('id of div');

Answer 2

試試下面的代碼。

HTML

<ion-header>
  <ion-navbar>
    <ion-title>
      Location
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="map_canvas"></div> 
</ion-content>

CSS

#map_canvas {
  height: 100%;
}

JS

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapOptions, MarkerOptions, Marker } from '@ionic-native/google-maps';

declare var google;

export class SearchResultsPage extends MapPage {

  @ViewChild('map') mapElement: ElementRef;
  private map: any;

  constructor(public navCtrl: NavController,  public navParams: NavParams, private googleMaps: GoogleMaps) {}


  ionViewDidLoad() {
    this.initMap();
    setTimeout(function() {
      this.addMarkers();
    }, 1000);
  }

  initMap() {
      let mapOptions: GoogleMapOptions = {
        camera: {
          target: {
            lat: this.latitude,
            lng: this.longtitude
          },
          zoom: 13,
          tilt: 0
        }
      };

      this.map = GoogleMaps.create('map_canvas', mapOptions);

    },

    addMarkers() {
      this.places.forEach(function(place) {
        let options: MarkerOptions = {
          title: place.name,
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: place.location.latitude,
            lng: place.location.longtitude
          }
        };

        this.map.addMarker(options);

      });
    }
}

Answer 3

問題在於函數作用域。 這是更新后的代碼：

  addMarkers() {
    let map = this.map;
    this.places.forEach(function (place) {
      let options: MarkerOptions =
      {
        title: place.name,
        icon: 'blue',
        animation: 'DROP',
        position: {
          lat: place.location.latitude,
          lng: place.location.longtitude
        }
      };
      map.addMarkerSync(options);
    })
  }