Javascript 点击谷歌地图移动标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4504636/
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
Google maps moving marker on click
提问by mer
What I want to do is,
我想做的是，
on my map, when I click somewhere on the map, it shows a marker on the point, then I click different point on the map then it shows a another marker. But I want it to move the first marker to the second point.
在我的地图上，当我单击地图上的某处时，它会在该点上显示一个标记，然后我单击地图上的不同点，然后它会显示另一个标记。但我希望它将第一个标记移动到第二个点。
( I put " behind the html tags for putting the code here.)
（我将 " 放在 html 标签后面，以便将代码放在这里。）
This is my code:
这是我的代码：
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
animation: google.maps.Animation.DROP,
});
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
回答by dsas
Every time placemarker()is ran, it creates a new marker.
每次placemarker()运行时，它都会创建一个新标记。
You need to create the marker once outside of the placemarker function and after that, inside placemarker, use marker.setPosition().
您需要在 placemarker 函数外创建一次标记，然后在 placemarker 内使用marker.setPosition().
回答by AlfaTeK
Another solution is to move a marker, for that you just user marker.setPosition(). (thanks kjy112 for the warning :)
另一种解决方案是移动一个标记，为此您只需使用marker.setPosition()。（感谢 kjy112 的警告：）
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker;
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
回答by AlfaTeK
To remove a marker just setMap(null) it.
要删除标记，只需 setMap(null) 即可。
<html>
<style type="text/css">
#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var oldMarker;
function initialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
animation: google.maps.Animation.DROP,
});
if (oldMarker != undefined){
oldMarker.setMap(null);
}
oldMarker = marker;
map.setCenter(location);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
