確認infowindow后刪除標記

Question

來自jsFiddle的另一個{"error": "Please use POST request"}阻止了我在收到用戶確認后刪除google-maps-api-3標記的嘗試。 我的jsFiddle代碼就在這里 。 您可以通過首先單擊地圖創建一個或多個標記，然后右鍵單擊其中一個標記來查看錯誤。 最后，單擊“刪除”按鈕。

代碼借用了這段代碼 。

編輯

3次更正。

1. 正如評論中指出的那樣，我沒有更新jsFiddle。 更正版本可在/ 5 /找到。 主要區別在於“右鍵單擊”監聽器內部的代碼行已被注釋掉，因為它應該一直存在。

2. 注釋掉一行代碼的相同修正在下面完成。

3. 我不再收到錯誤“{”錯誤“：”請使用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事件將任何操作綁定到domready中的元素。

3. 為每個標記添加ID，以便您能夠分別識別每個標記。 我在下面的例子中使用了一個簡單的計數器。 每次創建標記時都會增加它。

首先創建infowindow實例和一個計數器：

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

然后使用特定ID創建每個標記，並在infowindow按鈕上使用該id：

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事件，使用你從按鈕獲得的標記id調用你的刪除函數，最后循環遍歷你的markers數組以刪除相應的標記。

JSFiddle演示