Question

我在这个例子中使用代码

＆＃13;

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: { lat: 35.687719, lng: 139.702146 }
  });

  map.addListener('click', function(e) {
    window.event = e;
    placeMarkerAndPanTo(e.latLng, map);
 });
}

function placeMarkerAndPanTo(latLng, map) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  
  map.panTo(latLng);
}

＆＃13;

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

＆＃13;

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwqIkJwBb6g4KirOaLnNgE1I6MtWnKxac&callback=initMap&language=ja">
</script>

＆＃13;

现在，我想通过lng，lat在地图中只显示一个点。当我在地图中点击一个新点时，我想删除地图中旧点的标记，以确保只显示一个点。你能帮助我吗。感谢

Answer 1

.gitignore

var map;
var gmarkers = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: { lat: 35.687719, lng: 139.702146 }
  });

  map.addListener('click', function(e) {
    removeMarkers();
    window.event = e;
    placeMarkerAndPanTo(e.latLng, map);
 });
}

function placeMarkerAndPanTo(latLng, map) {
  
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  
  map.panTo(latLng);
  gmarkers.push(marker);
}
 
function removeMarkers() {
  for (i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }
}

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

Rails google map javascript，只显示一个点并在点击其他点时删除一个标记点

1 个答案: