Google map api v3 - 在进行地理编码时删除旧标记 [英] Google map api v3 - remove old marker when doing geocoding

问题描述

我是新的JavaScript和谷歌地图API，我一直在关注这个链接来删除标记，但是我不能使它工作。

基本上我想用一个按钮来生成标记当用户输入一个地址并点击按钮时。当用户输入一个新地址并再次点击该按钮时，旧标记将被删除，新标记将被插入新地址。标记也可拖动。

这是我的js代码：

  $（'＃geocode '）.live（'click'，function（）{
 codeAddress（）; 
 return false; 
}）; 
 
函数codeAddress（）{
 var address = document.getElementById（'location'）。value; 
 geocoder.geocode（{'address'：address}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 
 map .setCenter（results [0] .geometry.location）; 
 if（marker）marker.setMap（null）; 
 if（marker）delete marker; 
 var marker = new google.maps .Marker（{
 draggable：true，
 map：map，
 position：results [0] .geometry.location 
}）; 
 
 var newlat = results [0] .geometry.location.lat（）; 
 var newlng = results [0] .geometry.location.lng（）; 
 document.getElementById（'mwqsflatlng'）。value = （newlat +'，'+ n ewlng）; 
 draggeablemarker（marker）; 
} else {
 alert（'由于以下原因，地理编码不成功：+状态）; 
} 
}）; 
} 
  

更新
当我检查inspect元素时，它给了我这个错误：

未捕获的TypeError：无法调用undefined的setMap方法

解决方案

您需要对标记进行引用

code>对象可以在稍后访问它。如果您想将地图限制为一次显示的 marker ，您可以更新标记位置属性而不是删除并重新创建它。

这是一个函数，可以更改标记位置或创建新标记（如果地图上不存在标记）。 location参数是Google LatLng 对象，它与Geocoder results [0] .geometry.location $ b

注意 marker 变量定义在函数范围之外。这是什么让你在稍后引用标记。

  var marker; 
 
函数placeMarker（位置）{
 if（marker）{
 //如果标记已经被创建，改变位置
 marker.setPosition（location）; 
} else {
 //创建一个标记
 marker = new google.maps.Marker（{
位置：location，
 map：map，
 draggable：true 
}）; 
 
 
 
 
 $ b $ p 
 $ b 
因此，对于您的地理编码成功功能，您只需要将结果传递给此函数。
  geocoder.geocode（{'address'：address}，function（results，status）{ 
 if（status == google.maps.GeocoderStatus.OK）{
 placeMarker（results [0] .geometry.location）; 
 
} 
 ... 
  
 这是一个概念的小提琴。您可以点击地图，标记将移动到所需的位置。
 
I am new in Javascript and google map api and I have been follow this link to remove a marker but some how I cannot make it work.

Basically I want to use a button to generate the marker when user enter an address and click on the button. When the user enter a new address and click on the button again, the old marker will be removed and the new marker pin on the new address. The marker also draggable. 

Here is my js code:
$('#geocode').live('click',function() {
        codeAddress();
        return false;
});    

function codeAddress() {
                    var address = document.getElementById('location').value;
                    geocoder.geocode( { 'address': address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {

                                map.setCenter(results[0].geometry.location);
                                if (marker) marker.setMap(null);
                                if (marker) delete marker;
                                var marker = new google.maps.Marker({
                                     draggable:true,    
                                      map: map,
                                      position: results[0].geometry.location
                                  });

                                 var newlat = results[0].geometry.location.lat();
                                 var newlng = results[0].geometry.location.lng(); 
                                 document.getElementById('mwqsflatlng').value = (newlat+' , '+newlng);
                                  draggeablemarker(marker);
                                } else {
                                  alert('Geocode was not successful for the following reason: ' + status);
                                }
                    });
            }
Update
When I check on the inspect element, it gave me this error:

  
Uncaught TypeError: Cannot call method 'setMap' of undefined

解决方案
You need to have a reference to your marker object to be able to access it at a later time.  If you want to restrict the map to one marker showing at a time you can update the markers Position property instead of deleting and recreating it.

Here is a function that can change the markers position or create a new marker if one does not exist on the map.  The location parameter is a Google LatLng object which is the same as the object returned by the Geocoder results[0].geometry.location.

Notice the marker variable is defined outside of the function scope.  This is what allows you to refer to the marker at a later time.
var marker;

function placeMarker(location) {
    if (marker) {
        //if marker already was created change positon
        marker.setPosition(location);
    } else {
        //create a marker
        marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
    }
}
So for your geocode success function you should only have to pass the result to this function.
geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       placeMarker(results[0].geometry.location);

}
...
Here is a fiddle of of the concept.  You can click on the map and the marker will move to the desired location. 

                        
这篇关于Google map api v3  - 在进行地理编码时删除旧标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！