Javascript 如何删除 Google 地图上的标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2453297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I delete a marker on Google Maps?
提问by zjm1126
I only know of one way:
我只知道一种方式：
Right click and click 'delete me'
右键单击并单击“删除我”
How else can I delete markers on Google Maps?
我还能如何删除 Google 地图上的标记？
This is my code now:
这是我现在的代码：
GEvent.addListener(marker, 'mousedown', function(e) {
alert(e)
if (e.button == 2){
alert('sss')
map.removeOverlay(marker);
}
When i right-click, it alerts (40.23141543543321,114.3214121421); when I look at the API, I see this:
当我右键单击时，它会发出警报(40.23141543543321,114.3214121421)；当我查看 API 时，我看到了：
mousedown(latlng:GLatLng)
so I think that eis not an event, but a 'GLatLng'
所以我认为这e不是一个事件，而是一个“GLatLng”
If I use the 'singlerightclick', nothing happens when i right-click.
如果我使用'singlerightclick'，则右键单击时不会发生任何事情。
This is my full code:
这是我的完整代码：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">
</head>
<body onload="initialize()" onunload="GUnload()">
<style type="text/css">
*{
margin:0;
padding:0;
}
#head{
height:70px;
background:#a00;
}
#logo{
color:white;
font-weight:bold;
line-height:70px;
margin-left:100px;
}
#main{
position:relative;
margin-top:1px;
}
#left{
border:1px solid red;
height:700px;
margin-right:202px;
}
#top{
font-weight:bold;
line-height:70px;
margin-left:120px;
}
#map_canvas{
height:630px;
}
#right{
background:#ff0;
float:right;
height:702px;
position:absolute;
right:0;
top:0;
width:200px;
}
.container{
border:5px solid red;
height:50px;
margin-left:50px;
padding:17px 0 0 20px;
width:85%;
}
.b{
background:url(img/xr.png) right no-repeat;
}
.b > div{
width:30px;
height:31px;
background:url(img/xpinIcon.png) 0 0 no-repeat;
}
.c{
background:url(img/xr.png) right no-repeat;
margin-left:60px;
}
.c > div{
width:30px;
height:31px;
background:url(img/xlineIcon.png) 0 0 no-repeat;
}
</style>
<!--<div style="width:100px;height:100px;background:blue;"> </div>-->
<div id=head>
<div id=logo>logo</div>
</div>
<div id=main>
<div id=left>
<div id=top>search
<input type="text" name="" id="" style="width:80%"/>
</div>
<div id="map_canvas" ></div>
</div>
<div id=right ></div>
</div>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nicEdit.js"></script>
<script src="http://ditu.google.cn/maps?file=api&v=2&sensor=false&key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA" type="text/javascript"></script>
<script type="text/javascript">
var aFn;
//**********
function initialize() {
if (GBrowserIsCompatible()) {
//************
function a() {
}
//if(GControl)
a.prototype = new GControl();
a.prototype.initialize = function(map) {
var container = document.createElement("div");
var a='';
for(i=0;i<2;i++){
a+='<div class=b style="position:absolute;"><div></div></div>'
}
for(i=0;i<2;i++){
a+='<div class=c style="position:absolute;"><div></div></div>'
}
$(container).addClass('container');
$(map.getContainer()).append($(container).append(a));
return container;
}
a.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
//************
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new a());
map.enableScrollWheelZoom();
var center=new GLatLng(39.9493, 116.3975);
map.setCenter(center, 13);
aFn=function(x,y){
var point =new GPoint(x,y)
point = map.fromContainerPixelToLatLng(point);
var marker = new GMarker(point,{draggable:true});
var a=$(
'<form method="post" action="" style="height:100px;overflow:hidden;width:230px;">'+
'<textarea id="area1" cols="22" rows="5" style="border:none">cilck edit</textarea>'+
'</form>')
var once;
a.click(function(){
if(!once)var area1=new nicEditor({buttonList : ['bold','fontSize','left','center','right','forecolor']}).panelInstance('area1')
once=1;
})
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml(a[0]);
});
map.addOverlay(marker);
GEvent.addListener(marker, 'singlerightclick', function(point, source, overlay) {
alert('sss')
map.removeOverlay(marker);
});
}
$(".b").draggable({
revert: true,
revertDuration: 0
});
$('.container').droppable({greedy: true});
$("#map_canvas").droppable({
drop: function(event,ui) {
aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top);
//}
}
});
}
}
//*************
</script>
</body>
</html>
I thought I figured it out with this:
我想我想通了这个：
GEvent.addListener(map, 'singlerightclick', function(point, source, overlay) {
map.removeOverlay(marker);
});
but no, this removes the marker no matter whereI click on the map.
但不，无论我在地图上的何处单击，这都会删除标记。
I think I have it now:
我想我现在拥有它：
GEvent.addListener(map, 'singlerightclick', function(pixel,tile, marker) {
if(marker)
map.removeOverlay(marker);
});
采纳答案by Bj?rn
var marker = new GMarker(latlng);
map.addOverlay(marker);
GEvent.addListener(marker, 'singlerightclick', function(point, source, overlay) {
this.setMap(null);
});
回答by PaulG
it doesn't look like removeOverlay() is in the v3 API. Thanks a bunch, Korayem!
它看起来不像 removeOverlay() 在 v3 API 中。非常感谢，科拉耶姆！
回答by vegemite4me
回答by user3237276
Add a 'rightclick' event listener to google overlay
向 google 叠加层添加“右键单击”事件侦听器
google.maps.event.addListener(overlay, 'rightclick', function (event) {
})
回答by Douglas Blackburn
Here's how (as of 2018.03.26)(it's simple):
这是方法（截至 2018.03.26）（很简单）：
- Menu (three horizontal bars top left)
- Your places (inverted tear drop half-way-down the list)
- Saved
- make your selection (for me it was starred places I wanted to delete one)
- Click 3 dots on right and Select "Edit" from the drop-down list that appears
- find the marker you want to delete and click the "X" box on the right.
- 菜单（左上角三个水平条）
- 您的位置（倒挂在列表中途的位置）
- 已保存
- 做出你的选择（对我来说，它是我想删除的加星标的地方）
- 单击右侧的 3 个点，然后从出现的下拉列表中选择“编辑”
- 找到要删除的标记，然后单击右侧的“X”框。
Voila !
瞧！
