我正在尝试使用以下代码在HTML中实现Google地图自动填充文本框
HTML:
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>
<body>
...
<input type="" name="loc" class="form-control" id="location" value="">
...
</body>
JavaScript的:
<script>
function init() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
如果我在普通浏览器中打开HTML文件而不使用任何服务器或本地主机,则上述代码工作正常。当我在本地主机上使用相同的代码,并单击文本框时,文本框会自动禁用并抛出以下错误:
Google Maps API error: MissingKeyMapError js?v=3.exp&sensor=false&libraries=places:34
我指的是此文档ERROR: Google Maps API error: MissingKeyMapError,它说现在使用Google Maps API需要在2016年6月22日之后使用密钥。我创建了密钥并使用了文档https://developers.google.com/maps/documentation/javascript/get-api-key中提到的库,但是由于文本框没有选择库,所以没有运气。
尝试使用为我生成的密钥替换YOUR_API_KEY的库:
<script async defer src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
当我使用这个库时,它根本没有选择任何位置,文本框显示为空。
只有在本地主机上使用Google API时才会出现此问题。有人可以帮我解决这个错误吗? 生成密钥后,应该使用哪个确切的库?
使用以下两个库后,我收到以下错误:
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,places">
<script async defer src="https://maps.googleapis.com/maps/api/js? libraries=places&key=API_KEY&callback=initMap"
型=&#34;文本/ JavaScript的&#34;&GT;
错误:
Uncaught js? libraries=places&key=AIzaSyAI_DaubDzVzYzVoVJ83Pc_KJAMd0HeNlQ&callback=initMap:95 InvalidValueError: initMap is not a function
我使用的是前面提到的相同的javascript代码。
答案 0 :(得分:1)
您需要同时包含密钥(localhost作为允许的引荐来源)和地方库。
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
来自the documentation on libraries:
以下引导请求说明了如何请求Maps Javascript API的google.maps.geometry库:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"> </script>