[英]How to delete one marker at a time on google map
I have created an array of markers. 我创建了一系列标记。 I use these array of markers to listen for 'click' and place the marker on Google Map, as well as creating functions to 'clear all the markers', 're-display all the markers' and 'delete all the markers'.
我使用这些标记来听取“点击”并将标记放在谷歌地图上,以及创建“清除所有标记”,“重新显示所有标记”和“删除所有标记”的功能。
The problem is, how do I do this in a way where I am able to clear or delete one-marker-at-a-time? 问题是,我如何以一种能够一次清除或删除一个标记的方式执行此操作? Reason is because if I happened to accidentally plot to a location where I do not want, and I would want to clear/delete it away, I couldn't do it.
原因是因为如果我偶然地在一个我不想要的地方进行策划,并且我想清除/删除它,我就无法做到。 If I were to clear/delete that particular marker, the rest of the markers that I have plotted previously will be cleared/deleted as well...
如果我要清除/删除该特定标记,我之前绘制的其他标记也将被清除/删除...
My code: 我的代码:
//Initialize the map
function initialize() {
var myLatlng = new google.maps.LatLng(2,110);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
function changeForm(the_form) {
window.location = the_form;
}
//Listen for click
function marker() {
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
// Place markers in by click
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
title:"Specified Location",
icon: 'images/greenPoint.png'
});
markersArray.push(marker);
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
When you are creating your markers, instead of pushing them all onto the list markersArray, you could store them based on their Lat/Lng (or event better, some sort of id), and then set an event handler on each marker to remove itself from the list of markers when it is clicked. 当你创建标记时,你可以根据它们的Lat / Lng(或更好的事件,某种id)存储它们,而不是将它们全部推送到列表markersArray,然后在每个标记上设置一个事件处理程序来自行删除单击时从标记列表中。
I'm not sure if you can store arbitrary information with a google.maps.Marker object, but you could always create your own object that has an ID and a google.maps.Marker object as its members: 我不确定您是否可以使用google.maps.Marker对象存储任意信息,但您始终可以创建自己的对象,该对象具有ID和google.maps.Marker对象作为其成员:
function myMarker(id, location) {
this.id = id;
this.marker = new google.maps.Marker({...});
}
Then markersArray[id] = new myMarker(myId, myLocation)
would allow you to store all of your markers based on their arbitrary IDs. 然后
markersArray[id] = new myMarker(myId, myLocation)
将允许您根据其任意ID存储所有标记。 Then you can assign the handler that I described on this.marker
to remove yourself from the markersArray
and map. 然后你可以分配我在
this.marker
上描述的处理程序,将你自己从markersArray
和map中删除。
Another way to do it would be to store your markers based on their Lat/Lngs, so your markersArray would save the markers along the lines of: 另一种方法是根据Lat / Lngs存储您的标记,这样您的markersArray就可以保存标记:
markersArray[location.lat][location.lng] = new google.maps.Marker({...});
And you can then use your event handler to grab the marker's lat/lng when clicked, and remove itself from the array and map that way. 然后,您可以使用事件处理程序在单击时抓取标记的lat / lng,并从阵列中移除自身并以此方式映射。
Let me know if you need more detail. 如果您需要更多细节,请与我们联系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.