在谷歌地圖中添加新標記之前刪除以前的標記

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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
      });
    }

  );
}

Answer 3

在 HTML 代碼中添加谷歌地圖 api 密鑰

<div id="map_div" style="width:100%;height:85px;"></div>

在 JavaScript 代碼中

var add_marker = null,map = null;  //Declare vaiable

// map load 
map = new google.maps.Map(document.getElementById('map_div'),{
      zoom:10,
      position: new google.maps.LatLng(11.342423,77.728165),
      mapTypeId: google.maps.MapTypeId.ROADMAP
});

// first time map load set marker static
add_marker = new google.maps.Marker({
      map:map,
      position:new google.maps.LatLng(11.342423,77.728165),
      zoom:10
});

map.addListener("click",function(e){
    if(add_marker != null) {            //already set marker to clear
       add_marker.setMap(null);
       add_marker = null;
    }

    // Dynamic to set marker based on click event
    add_marker = new google.maps.Marker({
            map:map,
            position:new google.maps.LatLng(e.latLng.lat(),e.latLng.lng()),
            zoom:10
    });
});