リーフレットマップダブルマーカーの問題

Question

私はionic3アプリを構築しており、マップ機能のリーフレットを使用しています。しかし、私は奇妙な動作に遭遇しました。ページが読み込まれた後、GPSがオンになっていると、位置が自動的に取得されます。その後、より正確な位置を求めるために、与えられたマーカーを動かすことができます。この後、 "Locate me"ボタンをクリックするとマーカーが削除されますが、位置を取った後に再度取り出すと、現在の位置に2つのマーカーが追加されます。そのようなマーカーは地図から削除されましたが、マーカー配列からは削除されませんでした。 「Locate me」をクリックするたびに余分なマーカーが表示されるので、2回目のクリック後に合計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(); 
    }) 
    } 

をすべてのヘルプは非常にappreaciatedされます。ここでは

は、私が使用していたコードです。 よろしく、あなたの変数はあなたlocateメソッド内をスコープされ

Answer 1

トリックス。

したがって、そのメソッドを呼び出すたびに新しいものが作成されます。

ないあなたが提供されているコードでそれを削除することができますどのようにしてください...

はあなたが一度に1つの位置マーカーを持ちたいなら、あなたは、例えば代わり​​にインスタンスプロパティを使用することができますthis.marker

インスタンスにスコープが設定され、locateを呼び出すたびに同じ参照が再利用されます。