使用谷歌地图标记坐标作为表单输入答案

【问题标题】：Use Google Maps marker coordinates as form input使用谷歌地图标记坐标作为表单输入
【发布时间】：2017-12-10 23:06:39
【问题描述】：

从下面的 javascript 函数中，当用户单击地图上的某个位置时，我得到一个带有坐标的 javascript 变量 marker。

var marker;
function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
}
google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});

问题这些坐标如何用作表单输入？

<form method="POST" action="/authors" target="" enctype="multipart/form-data">
   ...
</form>

【问题讨论】：

如果没有有关上下文的更多信息，很难回答您。您可以想象在标记上循环，检索它们的位置属性，然后将这些属性作为表单中输入标签的值。这是你想做的事情吗？

标签： javascript laravel google-maps bootstrap-4

【解决方案1】：

您所要做的就是获取location 变量并将其分配给您的表单输入，如下所示：

首先，添加一个隐藏的输入字段

<form method="POST" action="/authors" target="" enctype="multipart/form-data">
   <input id="location" name="location" type="hidden" value="" />
</form>

其次，确保将位置变量添加到您的输入中

var marker;
function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }

  $("#location").val(location);

}
google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});

现在，每当调用 placeMarker(location) 时，它都会使用“位置”的 id 更新输入，其值是 location 的输出。

【讨论】：

太棒了！一个不错的简单解决方案。这可能是一个微不足道的问题，但我在这里找不到答案，而且我不精通 Javascript。再次感谢！
我稍微改变了您的解决方案，通过使用位置变量的属性分别存储坐标：$("#latitude").val(location.lat());$("#longitude").val(location.lng());
这也是个好主意！