我正在使用 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
最佳答案
这是 Google map 地点自动完成下拉菜单的常见问题。有几件事需要检查。
首先，确保您在要用于附加地点建议的输入元素上设置了明确的宽度。 Google map 需要它才能在填充时正确附加包含建议的 div。
如果这不是您的问题，并且您在 JS 控制台中没有看到任何错误，请打开开发工具的网络选项卡，并观察您在输入中键入内容时发生的网络请求。
您应该看到许多 AJAX 调用，其中应该包含建议或可用于调试的其他错误消息。一种常见的错误消息与开发者控制台中 Google map 权限的配置有关:
"This API project is not authorized to use this API. Please ensure this API is activated in the Google Developers Console."
如果是这种情况，您需要为您在 Google 库初始化时传递的 API key 启用 API 访问。
关于javascript - google.maps.places.Autocomplete 无法使用 SimpleHTTPServer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40349490/