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

问题描述

我有2个函数，如下所示：

  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）; $（。文本菜单）删除（）。 }; 
  

所以，据我所知，我有一个上下文菜单有删除标记选项。
在添加标记期间，我绑定了一个rightclick监听器，以显示此菜单。

直到现在，一切都没有任何问题。 >

但是当我尝试点击要删除的标记时，它只影响最后添加的标记。
当我再试一次时;没有任何反应。

所以我的想法是获得点击标记的id（或者可能有用的东西）并根据这个运行这个删除函数。

简单地说;我想从具有多个标记的地图上删除我点击的标记。

您有解决此问题的方法吗？

预先感谢！

解决！ $ b

这是解决方案。谢谢法提赫。没有你的指导是不可能的：

  var id; 
 var markers = {}; 
 var addMarker = function（）{
 marker = new google.maps.Marker（{
 position：Gpoint，
 map：map，
 draggable：true，
动画：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）; 
 
 $ / code> 

调用delete函数： delMarker（id）
Ps：在这种情况下右击就足够了

谢谢！

解决方案

jsFiddle上的工作示例

---

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

制作全局标记对象并将所有标记推送到此对象。获取标记实例时，为每个标记提供唯一的ID。然后，当你想删除一个标记时，请取其标识并在全局标记对象中找到该标记，最后通过传递null参数调用此标记实例的setMap方法。

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

你的伪代码应该是这样的。 如需更详细的代码，请查看演示。

 
 var currentId = 0; 
 var uniqueId = function（）{
 return ++ currentId; 
} 
 
 var markers = {}; 
 var createMarker = function（）{
 var id = uniqueId（）; //获取新的id 
 var marker = new google.maps.Marker（{//创建一个标记并设置id 
 id：id，
 position：Gpoint，
 map： map，
 draggable：true，
 animation：google.maps.Animation.DROP 
}）; 
标记[id] = marker; //将创建的标记缓存到以ID为键的标记对象
 return marker; 
} 
 var deleteMarker = function（id）{
 var marker = markers [id]; //通过给定的id找到标记
 marker.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屋！