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

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

22 голосов
/ 15 декабря 2011

У меня есть 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(); };

Итак, как вы понимаете, у меня есть контекстное меню с опцией «Удалить маркер».Я привязываю слушателя «щелчка правой кнопкой мыши» во время добавления маркера, чтобы показать это меню.

До этого момента все работает без проблем.

Но когда я пытаюсь нажать на маркер дляудалять;это влияет только на последний добавленный маркер.Когда я попробую еще раз;ничего не происходит.

Так что моя идея - получить идентификатор кликаемого маркера (или что-то, что может быть полезно) и запустить эту функцию удаления в соответствии с этим.

Кратко;Я хочу удалить маркер, на который я нажал, с карты, имеющей несколько маркеров.

Есть ли у вас какой-либо подход к решению этой проблемы?

Заранее спасибо!

решено!

Вот решение проблемы.Спасибо, Фатих.это было невозможно без вашего руководства: 

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

Спасибо!

Ответы [ 6 ]

43 голосов
/ 15 декабря 2011

Рабочий образец на 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 голосов
/ 01 ноября 2016

Просто передайте маркер в функции правого клика. Например: 

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

Ваши маркеры будут удаляться по щелчку правой кнопкой мыши.

2 голосов
/ 15 декабря 2011

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

1 голос
/ 24 августа 2013

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

второй currentId, если у вас есть идея получше, дайте мне знать 

var actualMarkerId = 0;
var currentId = 0;



    if (actualMarkerId>0) {
        deleteMarker(actualMarkerId);
        console.log(actualMarkerId);
    }
    var id = uniqueId(); // get new id
    actualMarkerId = id;
0 голосов
/ 04 июля 2019

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

Код как ниже

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
0 голосов
/ 23 июля 2014

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

var newid=0;

for (var index in results){

var marker = new google.maps.Marker({

map: map,
icon: image,

__gm_id: = newid+1,

});
}

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

...