在谷歌地图中添加新标记之前删除上一个标记

Question

我有以下代码在我点击地图的地方显示标记.它的工作完美,我想在添加新标记时删除以前的地图标记.在哪里我应该做出改变才能完美地工作.

       google.maps.event.addListener(map, "click", function (e) {

                    latLng = e.latLng;

                    console.log(e.latLng.lat());
                    console.log(e.latLng.lng());

                    image = clientURL + "/common/images/markers/red.png";
                    console.log("Marker");
                    marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        icon: image
                    });


                });

我提到了许多不适用于我的案例的链接要在添加新标记之前删除以前的标记

Answer 1

添加代码以从地图中删除标记(如果存在)并具有.setMap方法(假设现有标记在当前范围内可用或是全局的):

if (marker && marker.setMap) {
    marker.setMap(null);
}

功能齐全:

google.maps.event.addListener(map, "click", function (e) {

  latLng = e.latLng;

  console.log(e.latLng.lat());
  console.log(e.latLng.lng());

  image = clientURL + "/common/images/markers/red.png";
  console.log("Marker");
  // if marker exists and has a .setMap method, hide it
  if (marker && marker.setMap) {
    marker.setMap(null);
  }
  marker = new google.maps.Marker({
    position: latLng,
    map: map,
   icon: image
  });
});

概念证明小提琴

代码段:

var geocoder;
var map;
var marker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, "click", function(e) {

    latLng = e.latLng;

    console.log(e.latLng.lat());
    console.log(e.latLng.lng());

    console.log("Marker");
    // if marker exists and has a .setMap method, hide it
    if (marker && marker.setMap) {
      marker.setMap(null);
    }
    marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Answer 2

与您在问题中链接的答案类似，您需要维护对添加到地图中的最后一个标记（要删除的上一个标记）的全局引用。

var map;
var previousMarker; // global variable to store previous marker
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  map.addListener('click', function(e) {
      // if the previousMarker exists, remove it
      if (previousMarker)
        previousMarker.setMap(null);

      latLng = e.latLng;

      console.log(e.latLng.lat());
      console.log(e.latLng.lng());

      //image = clientURL + "/common/images/markers/red.png";
      console.log("Marker");
      previousMarker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }

  );
}