绑定谷歌在文本框上放置自动完成而不实例化谷歌地图
我正在尝试在我的网站上添加Google地方信息自动填充function。 我在使用自动完成function绑定搜索文本框时遇到问题,而不使用实例化谷歌地图。 我想要做的是,我想在我的搜索字段中使用自动完成作为文本建议。 但遗憾的是,我见过的所有教程都使用了自动完成function和谷歌地图一起使用。 有没有办法解决?
提前致谢。
你可以使用下面的代码。
修改:Google地图现在需要一个API密钥才能生效。
这是一个非常古老的线程,但谷歌现在需要一个API用于他们所有的基于地图的服务,我觉得代码示例可以简化一点。
内部头元素(更新代码与您的输入元素id属性):
在您的页面内确认您有一个文本输入,其ID属性与上述脚本匹配:
在关闭身体标签之前添加此脚本(使用您自己的API密钥更新):
其他说明:
- 这是此处找到的原始帮助/示例文章的略微修改版本
- 您需要Google Places API网络服务的有效API密钥,并从Google Developer Console启用Google Maps Javascript API
只需用你的api密钥替换Secretkey。
获取api密钥https://developers.google.com/maps/documentation/javascript/get-api-key
请参阅此Google Geo Dev博客文章: http : //googlegeodevelopers.blogspot.com/2012/05/faster-address-entry-with-google-places.html
它包含相关方法的链接,包括Autocomplete.getPlace()
它还指出,“即使您没有显示地图,您也可以在任何应用程序中使用自动填充function。我们要求的是,当您在没有地图的情况下使用自动填充function时,您会在文本字段下显示”由Google提供支持“徽标”。
function initialize() { var input = document.getElementById('location'); var autocomplete = new google.maps.places.Autocomplete( /** @type {HTMLInputElement} */(input), { types: ['(cities)'], }); google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); if (!place.geometry) { return; } //document.getElementById('fLat').value = place.geometry.location.lat(); //document.getElementById('fLong').value = place.geometry.location.lng(); var address = ''; if (place.address_components) { address = [ (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '') ].join(' '); } LoadEventCategory(); LoadYelpData(); }); } google.maps.event.addDomListener(window, 'load', initialize);