使用谷歌地点自动完成获取城市的place_id

4
我正在使用带有Google地点自动完成功能的输入字段。我已将自动完成设置为仅预测城市,但我很难找到一种简单的方法来获取所选城市的唯一place_id。我不想在Google地图上使用它。我只需要用一个唯一值来标识所选城市即可。提前致谢。
以下是我的JavaScript代码:
<script src="maps.googleapis.com/maps/api/js?libraries=places"; type="text/javascript"></script>
<script type="text/javascript">
function initialize() { 
  var options = { types: ['(cities)'] };
  var input = document.getElementById('searchCity');
  var autocomplete = new google.maps.places.Autocomplete(input,options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

以下是我的 PHP 代码:

<form method="GET" action=<?php echo $_SERVER['PHP_SELF'];?>>
<input id="searchCity" type="text" size="50" 
  placeholder="Enter a City" autocomplete="on" name="city">
<br>
<?php if (!empty($_GET['city']) ) {
  echo $_GET['city'];
} else {
  echo "not set";
}
unset($_GET['city']); ?>
</form>
<!-- Here I would like to show the place_id of the selected city-->
</div>

你卡在哪了?假设你正在使用Javascript Google Maps API的Places库,难道你不能直接使用结果的place_id吗? - spiv
是的,我正在使用Javascript Google Maps API的Places库。我无法提取place_id(可能来自json响应)。我的输入字段在一个使用action=<?php echo $_SERVER['PHP_SELF'];?>的表单中,我只想在同一页上打印它。 - maragos
你能分享一下处理自动完成结果的代码吗?例如,你的place_changed事件处理程序是什么样子的? - spiv
<script src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var options = { types: ['(cities)'] };
var input = document.getElementById('searchCity'); var autocomplete = new google.maps.places.Autocomplete(input,options); }
google.maps.event.addDomListener(window, 'load', initialize); </script>
- maragos
<form method="GET" action=<?php echo $_SERVER['PHP_SELF'];?>> <input id="searchCity" type="text" size="50" placeholder="Enter a City" autocomplete="on" name="city"> <br> <?php if (!empty($_GET['city']) ) { echo $_GET['city'];} else {echo "not set";} unset($_GET['city']); ?> </form> <!-- Here I would like to show the place_id of the selected city--> </div> - maragos
显示剩余2条评论
1个回答

7

您不需要使用PHP来显示地点详情,只需要为place_changed添加一个Javascript事件处理程序即可。

例如,将以下代码添加到您的initialize函数中:

google.maps.event.addListener(autocomplete, 'place_changed', function() {
  var place = autocomplete.getPlace();
  var form = input.parentElement;
  form.appendChild(document.createTextNode("Place ID is " + place.place_id));
});

这些来自Google文档的示例包含了使用place_changed事件的完整示例。它们值得一看:

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接