Angular 单张地图双标记问题

我正在构建一个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();
    })
  } 

presentAlert（）{
让alert=this.alertCtrl.create({
标题：“全球定位系统hiba”，
副标题：“凯雷姆·卡普索利亚是一个全球定位系统车辆，而不是一个直升机驾驶员梅加塔罗兹·萨霍斯！”，
按钮：[
{
文本：“Ok”，
角色：“取消”，
处理程序：（）=>{
}
}
]
});
alert.present（）；
}
ionViewDidLoad（）{
这个.getMap（）；
}
getMap（）{
this.map=传单.map（“map”）；
tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“地图数据©；贡献者，图像©”，
最小缩放：6
}).addTo（此.map）；
this.map.bounds=[]；
这是地图([
[45.636684, 16.030223],
[48.708459, 22.863228]
]);
this.map.setMaxBounds([
[45.636684, 16.030223],
[48.708459, 22.863228]
]);
这个。locate（）；
}
定位（）{
这是地图({
setView：对，
最大缩放：10，
EnableHighAccurance:正确
});
让标记；
this.map.on（'locationfound'，（e）=>{
if（marker&&this.map.hasLayer（marker））{
此.map.removeLayer（标记）；
}
设lat=e.纬度；
设lng=e.经度；
marker=新传单。marker（[e.纬度，e.经度]，{draggable:'true'}）；
marker.on（'dragend'，函数（事件）{
marker=event.target；
让位置=marker.getLatLng（）；
lat=位置。lat；
lng=位置。lng；
marker.setLatLng（新的传单.LatLng（position.lat，position.lng），{draggable:'true'}）；
});
this.map.addLayer（marker）；
});
this.map.on（'locationerror'，（err）=>{
这个.presentAlert（）；
})
} 

每一个帮助都会得到很大的回报。 当做

---

Trix

您的

标记

变量在

locate

方法中的作用域

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

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

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

this.marker

---

它的作用域是您的实例，并且每次调用

locate

时都会重复使用相同的引用。是的，这是我最初的想法，但当时不起作用。现在神奇的工作，有趣：）谢谢你的帮助。干杯