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
                    });


                });

我提到许多链接不适用于我的案例To remove previous markers before adding new Markers

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
  });
});

proof of concept fiddle

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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代码中添加google map api key

<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
    });
});

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

3 个答案: