Google Maps Api 3 Удалить только выбранный маркер
У меня две функции, как показано ниже:
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(); };
Итак, как вы понимаете, у меня есть контекстное меню с опцией «Удалить маркер». Я привязываю прослушиватель "rightclick" во время добавления маркера, чтобы показать это меню.
До сих пор все работает без проблем.
Но когда я пытаюсь нажать на маркер, чтобы удалить; он действует только на последний добавленный маркер. Когда я попробую снова; Ничего не произошло.
Итак, моя идея состоит в том, чтобы получить идентификатор маркера, по которому щелкнули мышью (или что-то, что может оказаться полезным) и запустить эту функцию удаления в соответствии с этим.
Кратко; Я хочу удалить маркер, на который я щелкнул, с карты с несколькими маркерами.
Есть ли у вас подход к решению этой проблемы?
Заранее спасибо!
РЕШЕНО!
Вот решение. Спасибо, Фатих. это было невозможно без вашего руководства:
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);
}
Вызов функции удаления: delMarker (id)
Ps: "На этот случай хватит правого клика"
Спасибо!
3 ответа
Карты Google не управляют вашими маркерами. Таким образом, все ваши маркеры должны управляться самостоятельно.
Создайте глобальный маркерный объект и поместите все маркеры в этот объект. И дать уникальный идентификатор каждому маркеру при получении экземпляра маркера. Затем, когда вы хотите удалить маркер, возьмите его идентификатор и найдите этот маркер в глобальном объекте маркера и, наконец, вызовите метод setMap этого экземпляра маркера с передачей нулевого аргумента.
Также я добавил демо, которое работает на jsFiddle. Код сильно документирован.
Ваш код psuedo должен быть таким. Для более подробного кода, пожалуйста, посмотрите демо.
var currentId = 0;
var uniqueId = function() {
return ++currentId;
}
var markers = {};
var createMarker = function() {
var id = uniqueId(); // get new id
var marker = new google.maps.Marker({ // create a marker and set id
id: id,
position: Gpoint,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
markers[id] = marker; // cache created marker to markers object with id as its key
return marker;
}
var deleteMarker = function(id) {
var marker = markers[id]; // find the marker by given id
marker.setMap(null);
}
Просто введите маркер в правую кнопку мыши. Например:
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)});
И сделайте так, чтобы функция выглядела так:
var delMarker = function (markerPar) {
markerPar.setMap(null);
}
Ваши маркеры будут удаляться при щелчках правой кнопкой мыши.
Для минимальных изменений
var newid=0;
for (var index in results){
var marker = new google.maps.Marker({
map: map,
icon: image,
__gm_id: = newid+1,
});
}
Теперь маркер ['__gm_id'] все еще имеет значение