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

问题描述

来自 jsFiddle 的另一个 {"error": "Please use POST request"} 阻止了我在获得用户确认后删除 google-maps-api-3 标记的尝试.我的 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.

代码大量借鉴了这段代码.

编辑

3 处更正.

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

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.

注释掉一行代码的相同更正如下.

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

除非我对 jsfiddle 代码进行手动更改(例如完全删除注释掉的行)，否则我不会再收到错误 "{"error": "Please use POST request"}"，然后 Control-返回，然后尝试添加和删除标记.所以这不再是一个问题，我相信.相反，新的问题是，如果有多个标记，而我只单击其中一个并请求删除它，则 所有 标记都将被删除.所以我真的需要一些帮助来实现我一次删除一个标记的目标.

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.

下面的代码

编辑

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

推荐答案

一些规则来实现你想要的.

1. 仅创建 infowindow 对象的一个​​实例，并使用 setContent() 方法修改其内容.

使用信息窗口的 domready 事件将任何操作绑定到信息窗口内的元素.

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

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

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.

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

First create the infowindow instance and a counter:

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

然后创建具有特定 id 的每个标记，并在信息窗口按钮上使用该 id:

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

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

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

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