javascript - 设置后如何删除谷歌地图API标记

Question

使用我的代码，每次单击 map 时都会出现几个标记。

我只想一个标记，每次单击都会删除前一个标记并将新标记的纬度/经度设置为新位置。

这是我的代码:

  var map;
  var markers = [];

  function initMap() {
      var aa = {lat: 32.3896651, lng: 48.3791718};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: aa
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
      document.getElementById("la").value = event.latLng.lat();
 document.getElementById("lo").value = event.latLng.lng();
    });



  }

  // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
    flat: false,
    map: map,
    draggable: true
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

Answer 1

通过每次添加新标记，您将在页面中创建许多对象。 为什么不重复使用现有的标记？使标记全局而不是标记数组，

var marker = null;

然后使用setPosition来更改现有标记对象的位置:

marker.setPosition(location);

这样，您只需在不同的位置使用一个标记。

 var map;
 var marker = null;

function initMap() {
     var aa = {lat: 32.3896651, lng: 48.3791718};

     map = new google.maps.Map(document.getElementById('map'), {
       zoom: 12,
       center: aa
     });

// This event listener will call addMarker() when the map is clicked.
     map.addListener('click', function(event) {
         addMarker(event.latLng);
         document.getElementById("la").value = event.latLng.lat();
         document.getElementById("lo").value = event.latLng.lng();
     });

   }

// Adds a marker to the map and push to the array.
function addMarker(location) {
        if(marker)
            marker.setPosition(location);
        else
            marker = new google.maps.Marker({
                position: location,
                flat: false,
                map: map,
                draggable: true
        });

    }

 // Sets the map on all markers in the array.
 function setMapOnAll(map) {

      marker.setMap(map);

  }

   // Removes the markers from the map, but keeps them in the array.
   function clearMarkers() {
     marker.setMap(null);
   }

   // Shows any markers currently in the array.
   function showMarkers() {
     marker.setMap(map);
   }

   // Deletes all markers in the array by removing references to them.
   function deleteMarkers() {
     clearMarkers();
   }