Google Maps API + 使用点击事件的边界数据填充文本字段答案

【问题标题】：Google Maps API + populate textfields with bounds data on click eventGoogle Maps API + 使用点击事件的边界数据填充文本字段
【发布时间】：2016-03-02 17:07:25
【问题描述】：

什么是解决这个问题的好方法，我有地图功能，当你点击地图时，它会填充一些全局变量。单击谷歌地图后，我希望从单击事件返回的 lat/lng 值填充几个文本框中的值。

我认为php可以用来填充值

<label for="textfield3">Square Number :</label>
<input type="text" value="<?PHP echo $squareNum; ?>" />

但我认为这需要这样编写，以便单击事件重新加载文本字段？？

【问题讨论】：

PHP 真的不适合这个解决方案。您希望在拦截谷歌地图上的点击事件的页面上运行 Javascript，然后使用通过那里传递的事件数据来填充输入字段。
您现有的代码是什么样的？如果您提供一个 Minimal, Complete, Tested and Readable example 来证明您所拥有的，那么帮助您会更简单。

标签： php html google-maps-api-3

【解决方案1】：

为了捕获和更新该文本字段，您需要使用绑定到您使用 Google Maps Javascript API 创建的地图对象的 Javascript。

HTML

<div id="map"></div>
...
<input type="text" id="lat" />
<input type="text" id="lng" />

Javascript

function initMap() {
  // Map config
  var myLatlng = {lat: -25.363, lng: 131.044};

  // lat and lng text box references
  var latText = document.getElementById('lat');
  var lngText = document.getElementById('lng');

  // this is the global map object
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatlng
  });

  map.addListener('click', function(e){
      latText.value = e.latLng.lat();
      lngText.value = e.latLng.lng();
  });
}

请注意，如果您在地图或任何其他元素（多边形、折线等）上有标记，这些元素的点击事件将不会触发地图的点击事件，而您'每个元素都必须有单独的 addListener 绑定。

【讨论】：

所以澄清一下，我目前在页面上加载了一张地图，当您单击其中一个绘制的多边形时，它会填充一个可变平方数（这是与多边形关联的平方值，当前在信息窗口中弹出）。在该单击事件中，我想用单击事件的结果填充文本字段（稍后我将为其他框复制）。据我了解，我已经拥有捕获点击事件并填充变量的 javascript...我需要做的是将该值链接到文本字段（基本上这样用户就不必复制和粘贴事件
@chris 是的，您可以使用[theNameOfYourTextFieldVariable].value = "new value"; 进行设置
在 HTML 平方数：和内在 Javascript [textfield3_new].value = "new value" 中添加监听器；（只是使用“新值”，直到我看到该文本框填充了某些内容）????
@chris 您必须为input 设置一个ID，例如<input id='testing' />，然后使用var myTextBox = document.getElementById('testing'); 获取该元素