确认信息窗口后删除标记

Question

来自 jsFiddle 的另一个 {"error": "Please use POST request"} 阻止了我在得到用户确认后删除 google-maps-api-3 标记的尝试。 My jsFiddle code is here。您可以先通过单击地图创建一个或多个标记，然后右键单击其中一个标记来查看错误。最后，点击“删除”按钮。

代码borrows heavily from this code。

编辑

3 处更正。

1. 正如评论中指出的，我没有更新 jsFiddle。可以在/5/ 找到更正的版本。主要的区别是监听器中“右键单击”的代码行被注释掉了，因为它应该一直都是。

2. 下面对注释掉一行代码进行了同样的修正。

3. 除非我手动更改 jsfiddle 代码（例如完全删除注释掉的行），否则我不再收到错误“{”错误“：”请使用 POST 请求“}”，然后控制-return，然后尝试添加和删除标记。所以这不再是一个问题，我相信。相反，新问题是，如果有多个标记并且我只单击其中一个并请求删除它，那么 all 标记将被删除。所以我真的需要一些帮助来完成我删除标记的目标，一次删除一个。

下面的代码

编辑

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. 为每个标记添加一个 ID，以便您能够单独识别每个标记。我在下面的示例中使用了一个简单的计数器。每次创建标记时增加它。

首先创建 infowindow 实例和一个计数器：

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

然后创建具有特定 ID 的每个标记，并在信息窗口按钮上使用该 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);
    });
}

然后你需要监听 infowindow 的domready 事件，使用你从按钮获得的标记 id 调用你的删除函数，最后循环遍历你的标记数组以删除适当的标记。

JSFiddle demo