离子 2/3 谷歌地图不断添加标记

Question

我有一个使用谷歌地图的Ionic 3应用程序。加载时，我正在渲染带有当前用户位置标记的地图。

我正在使用watchPostion在用户位置更改时更新标记。

但是，标记不断设置，即使位置没有变化，也会将其添加到顶部。

此外，当位置确实发生变化时，标记不会移动，而是添加了一个新的标记，所以我最终会得到一堆标记。

我只想在位置发生变化时才添加制造商，如果发生更改，请删除/添加标记，或者只是更新其位置。

这是我的离子组件/页面 -

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { MapStyle } from './map-style';
declare var google;
@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  constructor(
    public navCtrl: NavController,
    public geolocation: Geolocation
  ) { }
  ionViewDidEnter() {
    this.initializeMap();
  }
  private initializeMap() {
    const mapOptions = {
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoomControl: false,
      mapTypeControl: false,
      scaleControl: false,
      streetViewControl: false,
      rotateControl: false,
      fullscreenControl: false,
      styles: [...MapStyle]
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    this.geolocation.watchPosition()
      .subscribe((position) => {
        const geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        const currentUserMarker = new google.maps.Marker({
          map: this.map,
          position: geolocate,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 8.5,
            fillColor: "#2a929f",
            fillOpacity: 0.4,
            strokeWeight: 0.4
          }
          // content: `${position.coords.latitude} <br /> ${position.coords.longitude}`
        });
        this.map.panTo(geolocate);
        currentUserMarker.setPosition(geolocate);
      }, (err) => this.handleError)
  }
  private handleError(err) {
    console.log(err);
  }
}

Answer 1

菜鸟错误。

每次调用 watchPosition 时，我都会创建一个标记的新实例。

在

范围内声明了更高的标记，然后将我的逻辑包装在 if/else 中。

  if (this.marker != null) {
          this.marker.setPosition(geolocate);
          this.map.panTo(geolocate);
        } else {
          this.marker = new google.maps.Marker({
            position: geolocate,
            map: this.map,
............