在确认infowindow后删除标记

Question

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

EDIT

3校正。

1. 正如在评论中指出的，我没有更新jsFiddle。更正版本可在/5/找到。主要区别在于Listener内部的'rightclick'代码行被注释掉了，因为它应该一直存在。

2. 注释掉一行代码的修正如下。除非我手动更改jsfiddle代码（例如删除注释掉的行），否则我不再收到错误“{”error“：”请使用POST请求“}”，然后按Control-返回，然后尝试添加和删除标记。所以这不再是一个问题，我相信。相反，新问题是，如果有多个标记，我只点击它们中的一个并请求删除，而不是，所有标记都将被删除。所以我真的需要一些帮助来完成删除标记的目标，一次一个。

下面

编辑

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. 创建信息窗口对象的只有一个实例，并使用setContent()方法来修改其内容。

2. 使用infowindow的domready事件将任何操作绑定到infowindow中的元素。

3. 为每个标记添加一个标识，以便您可以分别识别每个标记。我在下面的例子中使用了一个简单的计数器。每次创建标记时都会增加它。

首先创建信息窗口实例和计数器：

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调用您的删除函数，最后循环访问标记数组以删除appropr iate标记。

JSFiddle demo