MissingKeyMapError:在本地主机上使用谷歌地图自动完成文本框时出错

MissingKeyMapError: Error while using Google Maps Autocomplete text box on local host

本文关键字：文本 出错 谷歌地图 主机 MissingKeyMapError      更新时间：2023-09-26

我正在尝试下面的代码实现谷歌地图自动完成文本框在HTML

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

我指的是这个文档错误:谷歌地图API错误:MissingKeyMapError，它说使用谷歌地图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>

当我使用这个库时，它根本没有选择任何位置，文本框显示为空。

只有当我在本地主机上使用谷歌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"

type = " text/javascript ">

错误:

Uncaught js?  libraries=places&key=AIzaSyAI_DaubDzVzYzVoVJ83Pc_KJAMd0HeNlQ&callback=initMap:95 InvalidValueError: initMap is not a function

我使用与前面提到的相同的javascript代码

您需要同时包含键(使用localhost作为允许的引用者)和places库。

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>

来自库的文档:

下面的bootstrap请求说明了如何请求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>
相关文章：