Google Maps Api 3 仅删除选定的标记 [英] Google Maps Api 3 Remove Selected Marker Only

问题描述

我有两个功能如下:

function addMarker() {标记 = 新的 google.maps.Marker({位置:Gpoint，地图:地图，可拖动:真实，动画:google.maps.Animation.DROP});map.panTo(Gpoint);google.maps.event.addListener(标记，右键单击"，功能(点){showContextMarker(point.latLng);});$('.contextmenu').remove();};函数 delMarker() { 标记.setMap(null);$('.contextmenu').remove();};

所以，正如我所理解的，我有一个带有删除标记"选项的上下文菜单.我在添加标记期间绑定了一个右键单击"侦听器，以显示此菜单.

到目前为止一切正常.

但是当我尝试单击要删除的标记时；它只影响最后添加的标记.当我再次尝试时；什么都没发生.

所以我的想法是获取点击标记的 id(或可能有用的东西)并根据此运行此删除功能.

简而言之；我想从具有多个标记的地图中删除我点击的标记.

你有什么办法可以解决这个问题吗?

提前致谢！

解决了！

这是解决方案.谢谢法提赫.没有您的指导，这是不可能的:

var id;var 标记 = {};var addMarker = 函数 () {标记 = 新的 google.maps.Marker({位置:Gpoint，地图:地图，可拖动:真实，动画:google.maps.Animation.DROP});map.panTo(Gpoint);id = 标记.__gm_id标记[id] = 标记；google.maps.event.addListener(marker, "rightclick", function (point) { id = this.__gm_id; delMarker(id) });}var delMarker = 函数(id){标记 = 标记 [id];标记.setMap(null);}

调用删除函数:delMarker(id)Ps:在这种情况下右键单击就足够了"

谢谢！

解决方案

jsFiddle 的工作示例

<小时>

Google 地图不会管理您的标记.所以你所有的标记都应该由你自己管理.

制作一个全局标记对象并将所有标记推送到该对象.并在获取标记实例时为每个标记赋予唯一的 id.然后当你想删除一个标记时，获取它的 id 并在全局标记对象中找到这个标记，最后通过传递 null 参数调用这个标记实例的 setMap 方法.

我还添加了一个适用于 jsFiddle 的演示.代码被大量记录.

你的伪代码应该是这样的.更详细的代码请看演示.

<前>var currentId = 0;var uniqueId = function() {返回 ++currentId;}var 标记 = {};var createMarker = function() {var id = uniqueId();//获取新的idvar marker = new google.maps.Marker({//创建一个标记并设置 id身份证:身份证，位置:Gpoint，地图:地图，可拖动:真实，动画:google.maps.Animation.DROP});标记[id] = 标记；//将创建的标记缓存到以 id 为键的标记对象返回标记；}var deleteMarker = function(id) {var 标记 = 标记 [id];//根据给定的 id 找到标记标记.setMap(null);}

I've 2 function as below:

function addMarker() {
    marker = new google.maps.Marker({
        position: Gpoint,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    map.panTo(Gpoint);

    google.maps.event.addListener(marker, "rightclick", 
    function (point) { 
    showContextMarker(point.latLng); } ); 
    $('.contextmenu').remove();
};

function delMarker() { marker.setMap(null); $('.contextmenu').remove(); };

So, as may understand I have a Context Menu having "Delete Marker" option on it. I am binding a "rightclick" listener during adding a marker, to show this menu.

Everything is working without any problem till this moment.

But when I try to click on a marker to delete; it is effecting only the last added marker. When I try again; nothing happens.

So my idea is to get the clicked marker's id (or something that may well be useful) and run this deleting function according to this.

Briefly; I want to delete the marker that I clicked on, from a map having multiple markers.

Do you have any approach to solve this problem ?

Thanks in advance!

SOLVED!

Here is the solution. Thank you Fatih. it was impossible without your guidance:

var id;
var markers = {};
var addMarker = function () {
    marker = new google.maps.Marker({ 
        position: Gpoint,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    map.panTo(Gpoint);
    id = marker.__gm_id
    markers[id] = marker; 

    google.maps.event.addListener(marker, "rightclick", function (point) { id = this.__gm_id; delMarker(id) });
}

var delMarker = function (id) {
    marker = markers[id]; 
    marker.setMap(null);
}

Calling delete function by: delMarker(id) Ps: "Right clicking is enough on this case"

Thank you!

解决方案

Working Sample on jsFiddle

---

Google Maps doesn't manage your markers. So all your markers should be managed by yourself.

Make a global marker object and push all markers to this object. And give unique id to each marker when getting a marker instance. Then when you want to delete a marker take its id and find this marker in global marker object and finally call this marker instance's setMap method with passing null argument.

Also I've added a demo that works on jsFiddle. Code is heavily documented.

Your psuedo code should be like this. For more detailed code please look the demo.

var currentId = 0;
var uniqueId = function() {
    return ++currentId;
}

var markers = {};
var createMarker = function() {
    var id = uniqueId(); // get new id
    var marker = new google.maps.Marker({ // create a marker and set id
        id: id,
        position: Gpoint,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    markers[id] = marker; // cache created marker to markers object with id as its key
    return marker;
}
var deleteMarker = function(id) {
    var marker = markers[id]; // find the marker by given id
    marker.setMap(null);
}

这篇关于Google Maps Api 3 仅删除选定的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！