传单地图双标记问题

Question

我正在构建一个 ionic3 应用程序并使用 leaflet 来实现地图功能。但是我遇到了一个奇怪的行为。页面加载后，如果 GPS 打开，则会自动获取位置。在此之后，为了更精确的位置，可以移动给定的标记。在此之后，如果我单击 "Locate me" 按钮，则标记将被删除，但在该位置之后，如果再次获取，我会将两个标记添加到我的当前位置。它就像标记从地图中删除但没有从标记数组中删除。每次我点击 "Locate me" 我都会得到一个额外的标记，所以在第二次点击后我总共有 3 个标记。

"Locate me" 按钮调用 locate() 函数。

这是我正在使用的代码：

presentAlert() {
    let alert = this.alertCtrl.create({
      title: 'GPS hiba',
      subTitle: 'Kérem kapcsolja be a GPS vevőt a helyzete meghatározásához!',
      buttons: [
        {
          text: 'Ok',
          role: 'cancel',
          handler: () => {

          }
        }
      ]
    });
    alert.present();
  }

  ionViewDidLoad() {
    this.getMap();
  }

  getMap() {
    this.map = leaflet.map("map");
    leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attributions: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      minZoom: 6
    }).addTo(this.map);

    this.map.bounds = [];

    this.map.fitBounds([
      [45.636684, 16.030223],
      [48.708459, 22.863228]
    ]);

    this.map.setMaxBounds([
      [45.636684, 16.030223],
      [48.708459, 22.863228]
    ]);

    this.locate();
  }

  locate() {
    this.map.locate({
      setView: true,
      maxZoom: 10,
      enableHighAccuracy: true
    });

    let marker;

    this.map.on('locationfound', (e) => {

      if (marker && this.map.hasLayer(marker)) {
        this.map.removeLayer(marker);
      }

      let lat = e.latitude;
      let lng = e.longitude;

      marker = new leaflet.marker([e.latitude, e.longitude], {draggable: 'true'});

      marker.on('dragend', function (event) {
        marker = event.target;
        let position = marker.getLatLng();

        lat = position.lat;
        lng = position.lng;

        marker.setLatLng(new leaflet.LatLng(position.lat, position.lng), {draggable: 'true'});
      });
      this.map.addLayer(marker);
    });

    this.map.on('locationerror', (err) => {
      this.presentAlert();
    })
  }

我们将不胜感激。问候，三重奏

Answer 1

您的 marker 变量在内您的 locate 方法中。

因此，每次调用该方法时都会创建一个新的。

不确定如何使用提供的代码删除它...

如果您希望一次只有一个位置标记，您可以使用实例属性代替：this.marker

它将限定在您的实例范围内，并且每次调用 locate 时都会重复使用相同的引用。

传单地图双标记问题

Leaflet map double marker issue

openstreetmap

leaflet

typescript

ionic3

angular