Question

这里我正在尝试创建一个地图，它将在所需的位置显示标记图标。它将从输入文本字段获取地址并使用谷歌地图Geocoder.But在地图上显示它。在第一次输入时它工作正常。第二次尝试两个标记出现在屏幕上。一个用于新位置，另一个用于前一个位置。可以删除以前位置的标记。我在这里使用纯JavaScript。

JSFiddle

CODE：

<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>

Answer 1

使marker全局可访问（删除var - 关键字）并仅在getPosition

中设置位置

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

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

谷歌地图地理编码器的标记问题（当前和以前的位置标记同时出现）

1 个答案: