Google地方搜索框仅在我的HTML页面中不起作用

Question

plz帮助，我的html页面无法使用Google地方搜索框。我什至在新页面中尝试，仍然没有结果。就像

当我键入任何地方时，下面是我使用的代码。

<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>

Answer 1

欢迎来到stackoverflow Sai！

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

  

Google Maps 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的网址尚未添加到允许的引荐来源网址列表中。请在Google Cloud Platform Console上检查API密钥的引荐来源网址设置。

因此您必须为此功能将页面URL列入白名单。希望这会有所帮助！