时间戳

首页 > 解决方案 > Google 地方搜索框不仅在我的 html 页面中有效

javascript - Google 地方搜索框不仅在我的 html 页面中有效

问题描述

请帮助，谷歌地方搜索框在我的 html 页面中不起作用。我什至在新页面中尝试过，但仍然没有结果。它只是显示像

在此处输入图像描述

当我输入任何地方时。以下是我使用的代码。

<div id="locationField">
    <input id="autocomplete" placeholder="Enter your address" type="text" />
  </div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&libraries=places&callback=initAutocomplete" async defer></script>
  
  <script>var placeSearch, autocomplete, geocoder;

function initAutocomplete() {
  geocoder = new google.maps.Geocoder();
  autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete'))/*,
      {types: ['(cities)']}*/);

  autocomplete.addListener('place_changed', fillInAddress);
}

function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        alert(results[0].geometry.location);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

function fillInAddress() {
  var place = autocomplete.getPlace();
  alert(place.place_id);
  //   codeAddress(document.getElementById('autocomplete').value);
}</script>

标签： javascripthtmlgoogle-maps

解决方案

欢迎来到stackoverflow Sai！

当我将您的示例代码复制并粘贴到一个新的 html 文件并使用 Chrome 打开它时，我会遇到与您相同的错误。但是开发者控制台中有一个提示有什么问题：

谷歌地图 JavaScript API 错误：RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error

您要授权的站点 URL：file_url /.../test.html

当你点击上面的链接时，你会得到这个解释：

RefererNotAllowedMapError

当前加载 Maps JavaScript API 的 URL 尚未添加到允许的引荐来源网址列表中。请在 Google Cloud Platform Console 上检查您的 API 密钥的引用设置。

因此，您必须将此功能的页面 URL 列入白名单。希望这可以帮助！

推荐阅读