gpt4 book ai didi

javascript - 谷歌地图地理编码器的标记问题(当前和先前的位置标记同时出现)

转载 作者:行者123 更新时间:2023-12-03 12:02:33 26 4
gpt4 key购买 nike

这里我试图创建一个 map ,它将在所需位置显示一个标记图标。它将从输入文本字段获取地址并使用谷歌地图地理编码器将其显示在 map 上。但是在第一次输入期间它工作正常。第二次尝试屏幕上出现两个标记。一个用于新位置,另一个用于先前位置。如何删除先前位置的标记。我在这里使用纯 JavaScript。

JSFiddle

代码:

<html>
<head>
<script src=' http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false '></script>
<style>
#mapholder{
width:400px;
height:400px;
border:1px solid black;
}
</style>
</head>
<body>
<input type='textarea' placeholder="input area here" id='text'>
<input type='button' value='get address' onClick='getPosition("text");'>
<div id='mapholder'></div>
<script>
var map;
var geocode;
var mycenter=new google.maps.LatLng(25.58404,83.57702);
function init(){
geocode=new google.maps.Geocoder();
var map_prop={
zoom:10,
center:mycenter,
mapeTypeId:google.maps.MapTypeId.ROADMAP
}
map=new google.maps.Map(document.getElementById('mapholder'),map_prop);
var marker=new google.maps.Marker({
position:mycenter,
animation:google.maps.Animation.BOUNCE

});
marker.setMap(map);
}
function getPosition(el){
var area=document.getElementById(el).value;
geocode.geocode({'address':area},function(result,status){
if(status==google.maps.GeocoderStatus.OK){
map.setCenter(result[0].geometry.location);
var newMarker=new google.maps.Marker({
position:result[0].geometry.location,
map:map
});
}else{
alert("Geocode was not successful for the following reason: " + status);

}
});

}
window.addEventListener('load',init,false);
</script>
</body>
</html>

最佳答案

使 marker 全局可访问(删除 var 关键字)并仅在 getPosition 中设置位置

marker.setPosition(result[0].geometry.location);

http://jsfiddle.net/ccp026sg/2/

关于javascript - 谷歌地图地理编码器的标记问题(当前和先前的位置标记同时出现),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25347832/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com