Leaflet map double marker Ausgabe

Question

Ich baue eine ionic3 App und nutze das Merkblatt für die Kartenfunktionen. Jedoch bin ich auf ein merkwürdiges Verhalten gestoßen. Nach dem Laden der Seite wird der Standort automatisch abgerufen, wenn GPS eingeschaltet ist. Danach kann der angegebene Marker für eine genauere Ortung verschoben werden. Wenn ich danach auf den "Locate me" -Button klicke, wird der Marker entfernt, aber nach dem Ort, wenn er wieder abgerufen wird, erhalte ich zwei Marker an meinem aktuellen Standort. Es ist so, als ob der Marker aus der Karte entfernt wurde, aber nicht aus dem Marker-Array. Jedes Mal, wenn ich auf "Locate me" klicke, erhalte ich einen zusätzlichen Marker, sodass ich nach dem zweiten Klick insgesamt 3 Marker habe.

Die Schaltfläche "Locate me" ruft die Funktion locate() auf. Hier

ist der Code, den ich verwende:

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(); 
    }) 
    } 

Jede Hilfe wird viel appreaciated werden. Grüße, Trix

Answer 1

Ihre Variable innerhalb Ihre locate Methode scoped ist.

Daher wird jedes Mal, wenn Sie diese Methode aufrufen, eine neue erstellt.

nicht sicher, wie Sie in der Lage sind, es zu entfernen mit dem mitgelieferten Code ...

Sollten Sie nur eine Ortsmarkierung zu einer Zeit haben wollen, könnten Sie beispielsweise eine Instanz Eigenschaft verwenden, statt: this.marker

Es wäre auf Ihre Instanz beschränkt, und die gleiche Referenz wird jedes Mal erneut verwendet, wenn Sie locate anrufen.