Question

我正在构建一个ionic3 app并使用leaflet作为map函数。但是我遇到了一个奇怪的行为。页面加载后，如果打开GPS，则会自动获取位置。在此之后，为了更精确的位置，可以移动给定的标记。在此之后，如果我单击“找到我”按钮，则标记将被删除，但在该位置后，如果再次获取，我会将两个标记添加到我当前位置。它就像标记从地图中删除而不是从标记数组中删除。每当我点击“找到我”时，我会得到一个额外的标记，所以在第二次点击后我总共有3个标记，然后开启。

“找到我”按钮调用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变量的范围是 <{1}}方法。

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

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

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

它将作为您的实例的范围，每次调用this.marker时都会重复使用相同的引用。

传单地图双标记问题

1 个答案: