确认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演示