web-dev-qa-db-fra.com

Comment supprimer un marqueur de la carte de la brochure

J'ajoute un marqueur sur la carte en cliquant sur l'utilisateur.
Le problème est que je ne souhaite qu’un seul marqueur, mais chaque fois que je clique sur la carte, un nouveau marqueur est ajouté.
J'essaie de l'enlever mais rien ne se passe:

var marker;
    map.on('click', function (e) {
        map.removeLayer(marker)

        marker = new L.Marker(e.latlng, { draggable: true });
        marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);

        marker.on('dragend', markerDrag);
    });
javascriptleafletopenstreetmap
8
1110

Au lieu d'utiliser .on pour capturer et gérer l'événement, vous pouvez utiliser .once. De cette manière, l'événement ne sera capturé qu'une seule fois et le gestionnaire se désolidarise par la suite.

map.on('click', function () {
    console.log('I fire every click');
});

map.once('click', function () {
    console.log('I fire only once');
});

Si vous avez besoin de dissocier un gestionnaire vous-même, vous pouvez utiliser .off. Vérifiez la référence pour les méthodes d'événement: http://leafletjs.com/reference.html#events

Pour ce qui est de la raison pour laquelle votre code ci-dessus ne fonctionne pas, au premier clic, vous essayez de supprimer le marqueur: map.removeLayer(marker), mais la variable marker ne contient pas d'instance L.Marker, de sorte que la carte ne peut pas la supprimer. Vous devriez vérifier si c'est défini en premier et ensuite seulement le supprimer: 

var marker;
map.on('click', function (e) {
    if (marker) { // check
        map.removeLayer(marker); // remove
    }
    marker = new L.Marker(e.latlng); // set
});

Voici un exemple de travail sur Plunker: http://plnkr.co/edit/iEcivecU7HGajQqDWzVH?p=preview

13
iH8

Utilisez .off () pour dissocier l’événement on click.

Cela devrait être quelque chose comme:

var marker;
map.on('click', mapClicked);

function mapClicked(e) {
    map.off('click', mapClicked);
    map.removeLayer(marker)

    marker = new L.Marker(e.latlng, { draggable: true });
    marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);

    marker.on('dragend', markerDrag);
}

Je ne l'ai pas testé mais cela devrait au moins vous mettre dans la bonne direction.

1
grim