Удаление маркера после подтверждения в информационном окне

Question

Еще один {"error": "Please use POST request"} от jsFiddle мешает моей попытке удалить маркер google-maps-api-3 после получения подтверждения от пользователя. Мой код jsFiddle здесь. Вы можете увидеть ошибку, сначала создав один или несколько маркеров, щелкнув карту, а затем щелкнув правой кнопкой мыши один из маркеров. Наконец, нажмите на кнопку "Удалить".

Код сильно заимствует из этого кода.

РЕДАКТИРОВАТЬ

3 исправления.

1. Как указано в комментарии, я не обновлял jsFiddle. Исправленную версию можно найти в / 5 /. Основным отличием является то, что строка кода внутри Listener для 'rightclick' закомментирована, как это и должно было быть всегда.

2. То же самое исправление закомментирования строки кода сделано ниже.

3. Я больше не получаю сообщение об ошибке "{"error": " Пожалуйста, используйте запрос POST "}", если я не внесу ручное изменение в код jsfiddle (например, полностью удалив закомментированную строку), затем Control-Return и затем попробуйте добавлять и удалять маркеры. Так что это больше не проблема, я считаю. Вместо этого новая проблема заключается в том, что если есть несколько маркеров, и я нажимаю только на один из них и запрашиваю его удаление, вместо этого удаляются все маркеры. Поэтому мне действительно нужна помощь, чтобы выполнить мою задачу по удалению маркеров, по одному за раз.

Код ниже

РЕДАКТИРОВАТЬ

var map
var infowindow;
var markers = [];

function initialize() {

    var NY = new google.maps.LatLng(40.739112, -73.785848);
    map = new google.maps.Map(
    document.getElementById('map-canvas'), {
        center: NY,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'click', function (event) {
        addMarker(event.latLng);
    });
}

function addMarker(location) {

    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    markers.push(marker);

    var delform = marker.getPosition() + '<br />' + '<form onsubmit="processdel(this,marker); return false" action="#">' + '  <input type="submit" id="delid" value="Delete" />' + '<\/form>';

    infowindow = new google.maps.InfoWindow({
        content: delform,
        size: new google.maps.Size(50, 50)
    });
    google.maps.event.addListener(marker, 'rightclick', function (event) {
        infowindow.open(map, marker);

        // marker.setMap(null); This is the line that was NOT supposed to be in the code.
    });
}

function processdel(form, marker) {

    infowindow.close();
    marker.setMap(null);
    marker = null;
}


initialize();

Answer 1

Несколько правил для достижения того, что вы хотите.

1. Создайте только один экземпляр объекта infowindow и используйте setContent() способ изменить его содержание.

2. Использовать domready Событие информационного окна, связывающее любое действие с элементом внутри информационного окна.

3. Добавьте идентификатор для каждого маркера, чтобы вы могли идентифицировать каждый из них в отдельности. Я использовал простой счетчик в приведенном ниже примере. Увеличивайте его каждый раз, когда вы создаете маркер.

Сначала создайте экземпляр infowindow и счетчик:

var infowindow = new google.maps.InfoWindow();
var counter = 0;

Затем создайте каждый маркер с определенным идентификатором и используйте этот идентификатор на кнопке информационного окна:

function addMarker(location) {

    counter++;

    var marker = new google.maps.Marker({
        position: location,
        map: map,
        id: counter
    });

    markers.push(marker);

    var deleteButton = '<button id="deleteButton" data-id="' + counter + '">Delete</button>';

    google.maps.event.addListener(marker, 'rightclick', function () {
        infowindow.setContent(deleteButton);
        infowindow.open(map, marker);
    });
}

Тогда вам нужно слушать domready В событии информационного окна вызовите функцию удаления с идентификатором маркера, полученным с помощью кнопки, и, наконец, выполните цикл по массиву маркеров, чтобы удалить соответствующий маркер.

JSFiddle demo