javascript - Google map 地标不会取代旧地标

我正在使用Google Maps应用程序开发网页，但遇到了一些麻烦。就目前而言，该网页具有功能图（无任何图层）和搜索栏。我是编程的新手，所以希望我没有一个快速修复的问题。

当我查找地址时，地标会定位在应该位于的位置。但是，当我使用不同的地址进行第二次搜索时，第一次搜索的地标仍然可见，因此屏幕上有两个地标。如何制作新的地标代替旧的？

<script type="text/javascript">
    var geocoder;
    var map;
    var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder ();
    var latlng = new google.maps.LatLng (55.1667, -114.4000);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
     map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    marker = new google.maps.Marker({map:map});
        }
    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);
            marker.setposition(results [0].geometry.location);
            map.setZoom(16);
            }
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
    });
                            }
</script>

最佳答案

实现您描述的一种方法是使用全局marker变量。由于codeAddress函数每次运行时都会调用new google.maps.Marker，因此每次都会获得一个新标记。

而是使用全局标记的setPosition功能来移动它。

    var geocoder;
    var map;

    // ADDED
    var marker;

  function initialize() {
    geocoder = new google.maps.Geocoder ();
    var latlng = new google.maps.LatLng (55.1667, -114.4000);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
     map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

     // ADDED
     marker = new google.maps.Marker({ map: map });
  }
    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);

            // CHANGED
            marker.setPosition(results [0].geometry.location);

            map.setZoom(16);
        }
        else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}