Question

点击它后，请帮我从地图上删除标记。

我写了一个剧本。鼠标左键单击地图后创建标记。鼠标右键单击标记后，应删除标记。

但是，它仅适用于一个标记。对于2,3或4个标记，脚本不起作用。请帮我解决这个问题。

JS：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  renderMarkers();

  map.addListener('click', function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();    
    var id = 'id_' + Date.now() + lat.toFixed(2) + lng.toFixed(2);
    generateMarker(lat, lng, id);    
  });  
}

function getMarkersFromLocalStorage() {
  return localStorage.markers ? JSON.parse(localStorage.markers) : {};
};

function addMarkerToLocalStorage(lat, lng, id) {
  var markers = getMarkersFromLocalStorage();
  markers[id] = {
    lat: lat, 
    lng: lng
  };
  localStorage.markers = JSON.stringify(markers);
};

function removeMarkerFromLocalStorage(id) {
  console.log('removeMarkerFromLocalStorage');
  var markers = getMarkersFromLocalStorage();
  delete markers[id];
  localStorage.markers = JSON.stringify(markers);
};

function renderMarkers() {
  var markers = getMarkersFromLocalStorage();  

  for(prop in markers) {
    generateMarker(markers[prop].lat, markers[prop].lng);
  };
};

function generateMarker(lat, lng, id) {  
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map,
    id: id
  }); 
  addMarkerToLocalStorage(lat, lng, id);

  marker.addListener('rightclick', function(e) {
    var m = marker;
    console.log(e, m['id']);    
    removeMarkerFromLocalStorage(m['id']);
    this.setMap(null);
    renderMarkers(); 
  });   

};

Answer 1

我可以在您的代码中看到几个问题：

不清楚为什么在标记的右键单击处理程序中调用renderMarkers();。这样，您将在地图上重新添加新标记，而不会删除之前的标记。
在生成标记的renderMarkers()函数中，您遗漏了generateMarker()函数中的第三个参数，导致标记上缺少ID并且您undefined右键单击处理程序中m['id']的值。
MarkerOptions对象规范中不存在id属性。我认为在创建像marker.id = id;

我修改了您的示例，它似乎正常运行。请看一下修改后的代码。

＆＃13;

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  renderMarkers();

  map.addListener('click', function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();    
    var id = 'id_' + Date.now() + lat.toFixed(2) + lng.toFixed(2);
    generateMarker(lat, lng, id);    
  });  
}

function getMarkersFromLocalStorage() {
  return localStorage.markers ? JSON.parse(localStorage.markers) : {};
};

function addMarkerToLocalStorage(lat, lng, id) {
  var markers = getMarkersFromLocalStorage();
  markers[id] = {
    lat: lat, 
    lng: lng
  };
  localStorage.markers = JSON.stringify(markers);
};

function removeMarkerFromLocalStorage(id) {
  console.log('removeMarkerFromLocalStorage');
  var markers = getMarkersFromLocalStorage();
  delete markers[id];
  localStorage.markers = JSON.stringify(markers);
};

function renderMarkers() {
  var markers = getMarkersFromLocalStorage();  

  for(prop in markers) {
    generateMarker(markers[prop].lat, markers[prop].lng, prop);
  };
};

function generateMarker(lat, lng, id) {  
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map
  }); 
  marker.id = id;
  addMarkerToLocalStorage(lat, lng, id);

  marker.addListener('rightclick', function(e) {
    var m = this;
    console.log(e, m['id']);    
    removeMarkerFromLocalStorage(m['id']);
    this.setMap(null);
  });   

};

＆＃13;

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="map">
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>

＆＃13;

看起来本地存储在SO小提琴中不可用，您可以查看代码https://jsfiddle.net/xomena/fyma08ov/

我希望这有帮助！

如何从Google地图中删除标记？

1 个答案: