只需要谷歌地图上的 2 个标记.删除之前的任何内容

Only want 2 markers on Google Map. Any previous are deleted

本文关键字：删除 任何内 谷歌地图      更新时间：2023-09-26

我想让用户点击一次，纬度/液化天然气被保存到输入中。（这个我有）。然后他们可以再次单击，下一个纬度/液化天然气将保存到第二组输入中。如果他们再次单击，则会擦除第一个标记并保存新的标记位置。用户满意后，单击"保存"，数据库中保存了 2 组 lat lng。

我已经足够远了，可以单击并放入文本框进行保存。但是不确定如何做第二个标记并擦除第一个，如果我做第三个，依此类推。

//MAP CLICKED
google.maps.event.addListener(map, 'click', function (event) {
    marker.setPosition(event.latLng);
    map.panTo(event.latLng);
    var clickposition = event.latLng;
      //MAP CLICKED
        google.maps.event.addListener(map, 'click', function (event) {
            marker.setPosition(event.latLng);
            map.panTo(event.latLng);
            var clickposition = event.latLng;

可视化简单的用户案例：我打开带有嵌入式谷歌地图的页面。我点击河流上游的一个点。然后我点击同一条河的一个点。假设我改变了主意，我移动了点。一次一个，或者只有一个。

编辑：

好的，当我单击时，我能够用 4 组不同的纬度/lng 填充所有 2 个文本输入，除了以前的标记仍然在地图上。 这就是我使用previousMarker全局变量的方式。不确定如何删除以前未使用的标记。

google.maps.event.addListener(map, 'click', function (event) {
    marker.setPosition(event.latLng);
    map.panTo(event.latLng);
    var clickposition = event.latLng;

    document.getElementById('lat1').value = clickposition.lat().toFixed(6);
    document.getElementById('lng1').value = clickposition.lng().toFixed(6);
    if (previousMarker) {
        document.getElementById('lat2').value = previousMarker.getPosition().lat();
        document.getElementById('lng2').value = previousMarker.getPosition().lng();
    }
    previousMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(clickposition.lat().toFixed(6), clickposition.lng().toFixed(6))
    });

执行此操作的一个好方法是将您创建的所有标记存储在数组中。您可以遍历它们，删除它们，将它们移动到其他数组中，并且总体上可以更好地控制它们。像这样：

var allMarkers = [];
var newMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(clickposition.lat().toFixed(6), clickposition.lng().toFixed(6))
});
allMarkers.push(newMarker);
var newMarker2 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(clickposition.lat().toFixed(6), clickposition.lng().toFixed(6))
});
allMarkers.push(newMarker2);
google.maps.event.addListener(map, 'click', function (event) {
    allMarkers.forEach(function(element,index,array) {
        // Move
        element.setPosition(event.latLng);
    });
    // Or remove
    allMarkers[0].setMap(null);
});

希望这可以帮助您再次存储和访问标记。

一个选项，只有两个标记。 创建后，将它们移动到新位置。 跟踪点击次数（创建/移动标记的时间），并根据点击是奇数还是偶数来替换单击更改的标记。

概念验证小提琴

代码片段： 

var map;
var marker1;
var marker2;
var previousMarker;
var clickCount = 0;
function initialize() {
  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(event) {
    if (!marker1 || !marker1.setPosition) {
      marker1 = new google.maps.Marker({
        position: event.latLng,
        map: map,
        title: "#" + clickCount + ":" + event.latLng.toUrlValue(6)
      });
    } else if (!marker2 || !marker2.setPosition) {
      marker2 = new google.maps.Marker({
        position: event.latLng,
        map: map,
        title: "#" + clickCount + ":" + event.latLng.toUrlValue(6)
      });
    } else if ((clickCount % 2) == 0) {
      marker1.setPosition(event.latLng);
      marker1.setTitle("#" + clickCount + ":" + event.latLng.toUrlValue(6));
    } else {
      marker2.setPosition(event.latLng);
      marker2.setTitle("#" + clickCount + ":" + event.latLng.toUrlValue(6));
    }
    if (marker1 && marker1.getPosition) {
      document.getElementById('lat1').value = marker1.getPosition().lat().toFixed(6);
      document.getElementById('lng1').value = marker1.getPosition().lng().toFixed(6);
    }
    if (marker2 && marker2.getPosition) {
      document.getElementById('lat2').value = marker2.getPosition().lat();
      document.getElementById('lng2').value = marker2.getPosition().lng();
    }
    clickCount++;
    map.panTo(event.latLng);
  });
}
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>
<input id="lat1" />
<input id="lng1" />
<input id="lat2" />
<input id="lng2" />
<div id="map_canvas"></div>

相关文章：