确认infowindow后删除标记 [英] deleting a marker after confirmation infowindow

问题描述

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

代码借鉴代码。

编辑

3更正。

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




2. 注释掉一行代码在下面完成。

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

下面的代码

编辑

  var map 
 var infowindow; 
 var markers = []; 
 
函数initialize（）{
 
 var NY = new google.maps.LatLng（40.739112，-73.785848）; 
 map = new google.maps.Map（
 document.getElementById（'map-canvas'），{$ b $ center：NY，
 zoom：16，
 mapTypeId ：google.maps.MapTypeId.ROADMAP 
}）; 
 
 google.maps.event.addListener（map，'click'，function（event）{
 addMarker（event.latLng）; 
}）; 
 
 
函数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 falseaction =＃> '+'< input type =submitid =delidvalue =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）;这是不应该在代码中的那一行。
}）; 
 
 
函数processdel（form，marker）{
 
 infowindow.close（）; 
 marker.setMap（null）; 
 marker = null; 
} 
 
 
 initialize（）; 
  

解决方案

一些规则实现你想要的。

1. 创建infowindow对象的一个​​实例并使用 setContent（）方法修改其内容。

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


2. 为每个标记添加一个标识，以便您可以分别识别每个标记。我在下面的例子中使用了一个简单的计数器。首先创建infowindow实例和一个计数器：

   $ / $>
   $ b
b
$ b

  var infowindow = new google.maps.InfoWindow（）; 
 var counter = 0; 
  

然后使用特定的id创建每个标记并在infowindow按钮上使用该标识：

 函数addMarker（location）{
 
 counter ++; 
 
 var marker = new google.maps.Marker（{
 position：location，
 map：map，
 id：counter 
}）; 
 
 markers.push（marker）; 
 
 var deleteButton ='< button id =deleteButtondata-id ='+ counter +'>删除< / button>'; 
 
 google.maps.event.addListener（marker，'rightclick'，function（）{
 infowindow.setContent（deleteButton）; 
 infowindow.open（map，marker）; 
}）; 
} 
  

然后你需要听取 domready infowindow的事件，使用从按钮获得的标记ID调用你的删除函数，最后遍历你的标记数组删除相应的标记。





JSFiddle演示




Yet another {"error": "Please use POST request"} from jsFiddle is thwarting my attempt to delete a google-maps-api-3 marker after getting confirmation from the user. My jsFiddle code is here. You can see the error by first creating one or more markers by clicking on the map, and then right-clicking on one of the markers. Finally, click on the "Delete" button.

The code borrows heavily from this code.

EDIT

3 corrections.

1. As pointed out in a comment, I had not updated the jsFiddle. A corrected version can be found at /5/. The main diff is that the line of code inside the Listener for 'rightclick' is commented out, as it should have been all along.

2. That same correction of commenting out a line of code is done below.

3. I am no longer getting the error "{"error": "Please use POST request"}" unless I make a manual change to the jsfiddle code (such as deleting the commented out line altogether), then Control-Return, and then try to add and delete markers. So that is no longer a problem, I believe. Instead the new problem is that if there are multiple markers and I click on just one of them and request its deletion, instead all markers are deleted. So I really need some help to accomplish my goal of deleting markers, one at a time.

The code below

EDIT

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();

解决方案

A few rules to achieve what you want.

1. Create only one instance of the infowindow object and use setContent() method to modify its content.

2. Use the domready event of the infowindow to bind any action to an element within the infowindow.

3. Add an Id to each marker so that you are able to identify each one separately. I used a simple counter in the below example. Increment it each time you create a marker.

First create the infowindow instance and a counter:

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

Then create each marker with a specific id and use that id on the infowindow button:

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);
    });
}

Then you need to listen to the domready event of the infowindow, call your delete function with the marker id that you get from the button, and finally loop through your markers array to delete the appropriate marker.

JSFiddle demo

这篇关于确认infowindow后删除标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！