只需要Google地图上的2个标记。任何以前被删除

Question

我想用户点击一次，经纬度/ lngs被保存到输入。 （我有这个）。然后他们可以再次点击，下一个经纬度被保存到第二组输入。如果再次点击，第一个标记将被删除并保存新的标记位置。一旦用户满意，他们点击保存，并将2组经纬度保存在数据库中。

我已经足够抓住点击并放置在文本框中保存。但不知道如何做第二个标记并删除第一个，如果我做第三个，依此类推。

//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个文本输入，2组不同的纬度/ LNGS作为我点击沿，除了前面的标志仍然在地图上。这是我使用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)) 
    }); 

Answer 1

一个好的方法是将你创建的所有标记存储在数组中。在你可以在它们之间迭代，删除它们，将它们移动到其他阵列，只是总有像在them.Something更多的控制：

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

希望，总体可以帮助您在储存和再次访问标记。

Answer 2

一个选项，只有两个标记。一旦它们被创建，将它们移动到新的位置。跟踪点击次数（创建/移动标记的次数），并根据点击次数是奇数还是偶数，通过点击更改标记。

proof of concept fiddle

代码片段：

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>