Preview
到目前为止，我可以单击地图，然后经度和纬度将显示在地图下方的文本字段中，再次单击标记将移动到新位置，新的经度和纬度将显示在文本字段中。但是，我试图使显示的经度和海拔高度在单击“保存”按钮后被保存，因此标记将在那里并且在下次单击时不会移动。
对不起，我的解释技巧太糟糕了，
TLDR：如何存储当前的经度和纬度而不会在下次单击时消失？
这是我的代码，显示当前的经度和纬度
function taruhMarker(petasaya, posisiTitik){
if( marker ){
marker.setPosition(posisiTitik);
}
else {
marker = new google.maps.Marker({
position: posisiTitik,
map: petasaya
});
}
document.getElementById("lat").value = posisiTitik.lat();
document.getElementById("lng").value = posisiTitik.lng();
document.getElementById("info").value = posisiTitik.info();
}
这是我用于文本字段和按钮的代码
<tr>
<td><input type="text" id="lat" name="lat" value="" readonly> </td>
<td><input type="text" id="lng" name="lng" value="" readonly></td>
</tr>
<tr>
<td><h3> Info Marker </h3></td>
</tr>
</table>
<center><textarea rows="7" cols="50" ></textarea><br><br>
<center><input button type="button" id="button" value="SAVE"></input>
我住在印度尼西亚，所以我使用的大多数变量都是印度尼西亚语
最佳答案
您可以简单地将多个标记存储在一个数组中以区分每个标记，并在不使用“保存”按钮的情况下将其对应的坐标显示在输入文本中。
我试图利用和复制您提供的代码（包括变量），这就是我提出的内容：
将全局变量markers设置为数组很重要：var markers = [];
function taruhMarker(posisiTitik) {
var marker = new google.maps.Marker({
position: posisiTitik,
map: map
});
markers.push(marker);
document.getElementById("lat").value = posisiTitik.lat();
document.getElementById("lng").value = posisiTitik.lng();
工作的JSBin：http://jsbin.com/zayejuc
我还在下面添加了代码段：
var map;
var markers = [];
function initMap() {
var haightAshbury = {lat: -5.4031649, lng: 105.2635957};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: haightAshbury
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
taruhMarker(event.latLng);
});
}
// Adds a marker to the map and push to the array.
function taruhMarker(posisiTitik) {
var marker = new google.maps.Marker({
position: posisiTitik,
map: map
});
markers.push(marker);
document.getElementById("lat").value = posisiTitik.lat();
document.getElementById("lng").value = posisiTitik.lng();
marker.addListener('click', function() {
infowindow.open(map, marker);
});
//delete markers
var tst = 1;
var contentString = posisiTitik+'<br>'+'<input onclick="deleteMarkers('+markers.length+');" type=button value="Delete Marker">';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
}
function deleteMarkers(tst) {
markers[tst-1].setMap(null)
}#map {
height: 100%;
}
#floating-panel
{
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div id="map"></div>
<div id="floating-panel">
<input id="lat" type="text" placeholder="Latitude">
<input id="lng" type="text" placeholder="Longitude">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0wB2s8fFD1L9BBEWRKidcH31nrBZ4r0c&callback=initMap">
</script>
</body>
</html>