Question

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>

我住在印度尼西亚，所以我使用的大多数变量都是印度尼西亚语

Answer 1

您可以简单地将多个标记存储在一个数组中，以便区分每个标记，并在不使用＆＃34; SAVE＆＃34;的情况下将其显示在输入文本中。按钮。

我试图利用并复制您提供的代码（包括变量），以及我发现的内容：

将全局变量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

我还在下面添加了代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

将经度和纬度保存到数组JavaScript Google Maps API EVENT中

1 个答案: