使用Google Maps API进行地理编码 - 更新现有标记,而不是添加其他标记

时间:2012-09-27 19:48:34

标签: javascript google-maps-api-3 geocode

在进行地理编码时,您可以简单地将现有标记移动到新地理编码结果的结果。

我们来看这个例子:

  • 加载地图时,会出现一个标记
  • 当有人进行地理编码时,标记会移至结果
  • 标记是可拖动的,因此用户可以进一步移动标记(如果需要)
  • 也许他们想要重新编码一个位置,因此新结果应该会自动移动现有标记。

在此示例中:

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple

...为每个新地理编码绘制一个新标记。

这有意义吗?

感谢!!!

-m

1 个答案:

答案 0 :(得分:4)

  1. 将标记设为全局。
  2. 在创建新的之前检查它是否存在。
  3. 如果存在则使用.setPosition将其移至新位置
  4. 如果不存在,请在所需位置创建标记。
  5. Example that does something close to what you want

    工作代码段:

    var map = null;
    var marker = null;
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0,-34)});
    
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(42, -85),
        zoom: 4
      });
    }
    
    function codeAddress() {
      var address = document.getElementById('address').value;
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          content = results[0].formatted_address;
          infowindow.setContent(content);
          if (marker && marker.setPosition) {
            marker.setPosition(results[0].geometry.location);
          } else {
            marker = new google.maps.Marker({
              map: map,
              icon: {
                url: 'http://maps.google.com/mapfiles/arrow.png',
                anchor: new google.maps.Point(10, 34)
              },
              position: results[0].geometry.location
            });
            google.maps.event.addListener(marker, 'click', function(evt) {
              infowindow.open(map);
            });
          }
          infowindow.setPosition(results[0].geometry.location);
          infowindow.open(map);
        } else {
          alert('Your search was not successful for the following reason: ' + status);
        }
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    html,
    body,
    #map-canvas {
      height: 500px;
      width: 500px;
      margin: 0px;
      padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <input id="address" value="New York, NY" />
    <input id="geocode" type="button" value="Find" onclick="codeAddress()" />
    <div id="map-canvas"></div>