Question

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

代码borrows heavily from this code。

修改

3次更正。

正如评论中指出的那样，我没有更新jsFiddle。可在/5/找到更正后的版本。主要区别在于监听器内部的代码行用于＆＃39;右键单击＆＃39;被注释掉了，因为它应该一直存在。
下面将对注释掉一行代码进行同样的更正。
我不再收到错误＆＃34; {＆＃34;错误＆＃34;：＆＃34;请使用POST请求＆＃34;}＆＃34;除非我手动更改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

一些规则来实现您想要的目标。

只创建一个infowindow对象的实例，并使用setContent()方法修改其内容。
使用infowindow的domready事件将任何操作绑定到infowindow中的元素。
为每个标记添加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);
    });
}

然后你需要收听infowindow的domready事件，用你从按钮获得的标记id调用你的删除函数，然后循环遍历你的markers数组以删除相应的标记。

JSFiddle demo

确认infowindow后删除标记

1 个答案: