Google Maps Api 3 Удалить только выбранный маркер

У меня есть 2 функции, как показано ниже:

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: "В этом случае достаточно щелчка правой кнопкой мыши"

Спасибо!

Ответы

Ответ 1

Рабочий пример jsFiddle

Карты 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);
}

Ответ 2

В дополнение к ответу @Fatih вы должны управлять маркерами. Например, вы можете добавить каждый маркер в массив, а затем удалить, вы можете найти этот маркер в массиве и установить значение val в null.

Ответ 3

Просто пропустите маркер в правой клавише. Например:

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

Ваши маркеры будут удалены по правому краю.

Ответ 4

это сработало для меня:

второй currentId, если у вас есть идея, сообщите мне

var actualMarkerId = 0;
var currentId = 0;



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

Ответ 5

Для минимальных изменений

var newid=0;

for (var index in results){

var marker = new google.maps.Marker({

map: map,
icon: image,

__gm_id: = newid+1,

});
}

Теперь маркер ['__ gm_id'] все еще имеет значение

Ответ 6

Простой, использовать глобальный массив для маркеров объектов. Вставьте маркерный объект в этот массив при нанесении маркера. Да, мы можем использовать идентификатор в объекте маркера для уникальной ссылки.

Код как ниже MarkerArray = []

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

MarkerArray.push(marker);

Чтобы удалить определенный маркер, найдите этот индекс элемента, используя уникальный идентификатор для каждого маркера.

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