Question

我正在使用google.maps.places.Autocomplete进行位置搜索和表单自动填充。

它正在直接访问html（file：///location.html），但是使用python SimpleHTTPServer来提供html（http://localhost:8000/location.html）。

使用localhost访问html，搜索输入正确加载，但没有显示结果。没有提出任何建议。

Html代码

<meta charset="utf-8"/>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places"></script>
<script>
  function initialize(){
    var input = document.getElementById('searchTextField');
    var options = {types: ['(cities)']};
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.addListener('place_changed', function() {
      var place = autocomplete.getPlace();
      var search_result = {};
      components = place.address_components;
      for (i in components){
        var name = components[i].types[0];
        search_result[name] = components[i].long_name;
        search_result[name + "_short"] = components[i].short_name;
      }
      var city = search_result.locality;
      var state = search_result.administrative_area_level_1;
      var country = search_result.country_short;
      document.getElementById('city').value = city;
      document.getElementById('state').value = state;
      document.getElementById('country').value = country;
    });
  };
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="searchTextField" type="text" size="50"></br></br>
<input id="city" type="text" size="50" disabled="disabled"></br></br>
<input id="state" type="text" size="50" disabled="disabled"></br></br>
<input id="country" type="text" size="50" disabled="disabled">
</body>
</html>

Python命令

python -m SimpleHTTPServer 8000

Answer 1

这是Google Maps Places Autocomplete下拉列表的常见问题。有几件事要检查。

首先，确保在要添加地点建议的输入元素上设置了明确的宽度。谷歌地图需要这样才能正确地粘贴包含建议的div。

如果这不是您的问题，并且您在JS控制台中没有看到任何错误，请打开开发工具的网络选项卡，并观察输入时输入的网络请求。

您应该看到许多AJAX调用应包含建议或可用于调试的其他错误消息。一条常见错误消息与开发人员控制台中的Google地图权限配置有关：

"This API project is not authorized to use this API. Please ensure this API is activated in the Google Developers Console."

如果是这种情况，您需要为在Google库初始化时传递的API密钥启用API访问权限。

google.maps.places.Autocomplete使用SimpleHTTPServer无法正常工作

1 个答案: