只需要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>