传单地图双标问题

Posted 2023-02-23

【中文标题】传单地图双标问题

【英文标题】：Leaflet map double marker issue

【发布时间】：2017-11-05 10:45:26

【问题描述】：

我正在构建一个 ionic3 应用程序并使用传单来实现地图功能。但是我遇到了一个奇怪的行为。页面加载后，如果打开 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();
    )
   

每一个帮助都会非常感激。 问候， 三重奏

【参考方案1】：

您的 marker 变量的范围在您的 locate 方法内。

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

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

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

它的作用域是您的实例，并且每次调用 locate 时都会重复使用相同的引用。

【讨论】：

是的，那是我最初的想法，但当时没有工作。现在神奇地工作，有趣:)感谢您的帮助。干杯！