web-dev-qa-db-fra.com

Google Maps Api 3 Supprimer uniquement le marqueur sélectionné

J'ai 2 fonctions comme ci-dessous:

function addMarker() {
    marker = new google.maps.Marker({
        position: Gpoint,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    map.panTo(Gpoint);

    google.maps.event.addListener(marker, "rightclick", 
    function (point) { 
    showContextMarker(point.latLng); } ); 
    $('.contextmenu').remove();
};

function delMarker() { marker.setMap(null); $('.contextmenu').remove(); };

Donc, comme vous pouvez le comprendre, j'ai un menu contextuel contenant l'option "Supprimer le marqueur". Je lie un écouteur "clic droit" lors de l'ajout d'un marqueur, pour afficher ce menu.

Tout fonctionne sans problème jusqu'à ce moment.

Mais quand j'essaie de cliquer sur un marqueur à supprimer; il n'effectue que le dernier marqueur ajouté. Quand j'essaye encore; Rien ne se passe.

Donc, mon idée est d'obtenir l'id du marqueur cliqué (ou quelque chose qui pourrait bien être utile) et d'exécuter cette fonction de suppression en fonction de cela.

Brièvement; Je souhaite supprimer le marqueur sur lequel j'ai cliqué, d'une carte comportant plusieurs marqueurs.

Avez-vous une approche pour résoudre ce problème?

Merci d'avance!

RESOLU!

Voici la solution. Merci Fatih. c'était impossible sans vos conseils:

var id;
var markers = {};
var addMarker = function () {
    marker = new google.maps.Marker({ 
        position: Gpoint,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    map.panTo(Gpoint);
    id = marker.__gm_id
    markers[id] = marker; 

    google.maps.event.addListener(marker, "rightclick", function (point) { id = this.__gm_id; delMarker(id) });
}

var delMarker = function (id) {
    marker = markers[id]; 
    marker.setMap(null);
}

Appel de la fonction de suppression par: delMarker(id) Ps: "Un clic droit suffit dans ce cas"

Je vous remercie!

google-maps-api-3selectedmarker
22
MrGorki

Exemple de travail sur jsFiddle

Google Maps ne gère pas vos marqueurs. Ainsi, tous vos marqueurs doivent être gérés par vous-même.

Créez un objet marqueur global et poussez tous les marqueurs sur cet objet. Et donnez un identifiant unique à chaque marqueur lors de l'obtention d'une instance de marqueur. Ensuite, lorsque vous souhaitez supprimer un marqueur, prenez son identifiant et recherchez ce marqueur dans l'objet marqueur global et enfin appelez la méthode setMap de cette instance de marqueur avec un argument nul.

J'ai également ajouté une démo qui fonctionne sur jsFiddle. Le code est fortement documenté.

Votre code pseudo devrait être comme ça. Pour un code plus détaillé, veuillez regarder la démo. 

 var currentId = 0; 
 var uniqueId = function () {
 return ++ currentId; 
} 
 
 var markers = {}; 
 var createMarker = function () {
 var id = uniqueId (); // obtenir un nouvel id 
 var marker = new google.maps.Marker ({// créer un marqueur et définir l'id 
 id: id, 
 position: Gpoint, 
 map: map, 
 draggable: true, 
 animation: google.maps.Animation.DROP 
}); 
 marqueurs [id] = marqueur; // cache créé un marqueur vers l'objet marqueurs avec id comme clé 
 retour marqueur; 
} 
 var deleteMarker = fonction (id) {
 var marqueur = marqueurs [ id]; // recherche le marqueur par l'id donné 
 marker.setMap (null); 
}
43
Fatih

En complément de la réponse @Fatih, vous devez gérer les marqueurs. Par exemple, vous pouvez ajouter chaque marqueur dans un tableau, puis le supprimer, vous pouvez trouver ce marqueur dans le tableau et définir la valeur nulle dans la carte.

2
Jorge

Passez simplement votre marqueur dans la fonction clic droit. Par exemple:

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: true,
    title: 'Hello World!'
});
google.maps.event.addListener(marker, "rightclick", function (point) {delMarker(marker)});

Et faites ressembler la fonction à ceci:

var delMarker = function (markerPar) {
    markerPar.setMap(null);
}

Vos marqueurs seront amovibles sur les clics droit.

2
Vinícius Biavatti

cela a fonctionné pour moi:

un second currentId, si vous avez une meilleure idée, faites le moi savoir

var actualMarkerId = 0;
var currentId = 0;



    if (actualMarkerId>0) {
        deleteMarker(actualMarkerId);
        console.log(actualMarkerId);
    }
    var id = uniqueId(); // get new id
    actualMarkerId = id;
1
Brian Sanchez

Simple, utilisez un tableau global pour les objets marqueurs. Poussez l'objet marqueur dans ce tableau sur le marqueur de traçage. Oui, nous pouvons utiliser Id dans l'objet marqueur pour une référence unique.

Code comme ci-dessous

MarkerArray = []

marker = new google.maps.Marker({
         Id: 1,
         position: new google.maps.LatLng(Lat,Long),
         type: 'info'         
          });

MarkerArray.Push(marker);

Pour supprimer un marqueur particulier, recherchez cet index d'élément à l'aide d'un ID unique pour chaque marqueur.

var MarkerIndex = MarkerArray.findIndex(function GetIndex(element) {
            return element.Id == 1;
});    
MarkerArray[MarkerIndex].setMap(null);
MarkerArray.splice(MarkerIndex, 1); // to remove element from global array
0
Vigneh Sundar

Pour des changements minimes

var newid=0;

for (var index in results){

var marker = new google.maps.Marker({

map: map,
icon: image,

__gm_id: = newid+1,

});
}

Le marqueur ['__ gm_id'] a toujours une valeur

0
user1426141