如何从Google地图标记获取经度和经度以便在表单中更新？

Posted 2021-05-06

我想制作一个自动更新标记坐标的表单。这是我脚本的一部分：

google.maps.event.addListener(map, "click", function(event) {
  marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
  });
  var x = document.getElementById("coordinates");
  if (x.style.display === "none") {
    x.style.display = "block";
  };
  var lati, longi;
  lati = event.latLng;
  longi = event.latLng;
  $("#lat").val(lati);
  $("#lng").val(longi);
});

这是表格：

<div id="coordinates" class="container" style="margin-top: 10px; display: none;">
  <div class="col-sm-5 col-md-5 col-lg-5">
    <input class="form-control" id="lat" name="lat" placeholder="Latitude" type="text" required>
  </div>
  <div class="col-sm-5 col-md-5 col-lg-5">
    <input class="form-control" id="lng" name="lng" placeholder="Longitude" type="text" required>
  </div>

答案

您需要使用.lat()对象的.lng()和google.maps.LatLng方法来获取各个字段：

var lati, longi;
lati = event.latLng.lat();
longi = event.latLng.lng();
$("#lat").val(lati);
$("#lng").val(longi);

proof of concept fiddle

代码段：

function initialize() {
  var 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) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map,
    });
    var x = document.getElementById("coordinates");
    if (x.style.display === "none") {
      x.style.display = "block";
    };

    var lati, longi;
    lati = event.latLng.lat();
    longi = event.latLng.lng();
    $("#lat").val(lati);
    $("#lng").val(longi);

  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 95%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="coordinates" class="container" style="margin-top: 10px; display: none;">
  <div class="col-sm-5 col-md-5 col-lg-5">
    <input class="form-control" id="lat" name="lat" placeholder="Latitude" type="text" required>
  </div>
  <div class="col-sm-5 col-md-5 col-lg-5">
    <input class="form-control" id="lng" name="lng" placeholder="Longitude" type="text" required>
  </div>
</div>
<div id="map_canvas"></div>

另一答案

你需要使用.lat()/.lng()将它们分开：

var myLatLng = event.latLng;

var lati = myLatLng.lat();
var lngi = myLatLng.lng();

$("#lat").val(lati);
$("#lng").val(longi);
_^______________________ //Make sure you correct the typo here

以上是关于如何从Google地图标记获取经度和经度以便在表单中更新？的主要内容，如果未能解决你的问题，请参考以下文章

Google Maps API - 如何在不显示地图的情况下从自动完成获取纬度和经度？

是否可以将地图中可拖动标记的纬度和经度（使用 javascript）转换为 HTML 表单？

使用数据库中的多个纬度和经度值在 Google 地图上标记路线

如何从 Google 版本地图中的拖动标记中获取格式化地址

如何使用 JSON 纬度数组和 JSON 经度数组在 Google 地图上显示折线？

使用标记从谷歌地图获取纬度/经度坐标