我正在尝试在我的网站上实现Google places Autocomplete字段,但它不起作用。我尝试将Google提供的样本复制/粘贴到 .html 文件中,它完全有效,就像在网络上找到的其他样本一样,this one所以我可能犯了一个错误。项目(ASP.NET MVC),但我不知道在哪里......
以下是我所做的:
//Loading places library
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
$(document).ready(function () {
initialize();
//Some other asynchronous methods loading some partial views, but with no rapport with Google Maps
}
function initialize() {
var myOptions = { /*various options*/ };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//4 next lines are given by Autocomplete doc
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
/* Implementation of other tools, like
* DrawingManager
* MarkerClusterer
* and OverlappingMarkerSpiderfier
*/
//This event is given by google
google.maps.event.addListener(autocomplete, 'place_changed', function() {
console.log("place_changed"); // Never goes here
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
HTML就是
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
这是一个简单的 .html 文件。我可以在控制台的“网络”标签中看到Google服务器的请求,例如:
但在我的项目中,该字段显示为占位符,但是当我输入时,只有...没有。就像一个简单的文本字段。控制台中的任何东西,只是......任何东西,除了库放置正确下载的脚本。
我尝试更改z-index
,但问题仍然存在。我还尝试将Autocomplete
字段放在页面的其他位置(而不是谷歌地图本身),它并不关心。
我还尝试将$(document).ready
改为google.maps.event.addDomListener(window, 'load', initialize);
,问题是......同样的!
哦,顺便说一下,我也尝试使用Autocomplete Search Box,问题完全相同。
有什么明显的东西我不见了吗?要在Google Developpers控制台中激活,要包含在我的项目中,还有什么......我是javascript和jquery的新手,所以也许我会忘记一个基本的东西?