谷歌位置自动补全-昨晚之后没有结果
Google Places Autocomplete - no results after last night
我有一个混合页面，可以让我通过3种不同的方式获取谷歌地图上的时间/长度——点击地图，做一个免费的地址搜索，和谷歌位置。一切都很顺利。
这是一个演示页面，一切都是在javascript:
http://duncanlamb.com/details.php今天早上，突然之间，谷歌位置框将不再以任何方式工作。我最初使用了这个例子中的代码:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete(当我将该代码放入测试页面时，它将独立工作。)从昨晚到今天早上，我的代码没有改变。这是我的代码，注意包括上面列出的3个方法(点击地图，地址搜索和位置自动完成)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var markers = [];
var latlng = new google.maps.LatLng(33.52, -86.80);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Watch for clicks on map, fill lat long boxes when detected, works outside of markers
google.maps.event.addListener(map, 'click', function(event) {
var evt = event.latLng;
console.log('latitude:'+evt.lat()+'; longitude:'+evt.lng()+';');
document.getElementById("latbox").value = evt.lat();
document.getElementById("lngbox").value = evt.lng();
});
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// Get single autocomplete result from box
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
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.
}
// marker.setIcon(/** @type {google.maps.Icon} */({
// url: place.icon,
// size: new google.maps.Size(71, 71),
// origin: new google.maps.Point(0, 0),
// anchor: new google.maps.Point(17, 34),
// scaledSize: new google.maps.Size(35, 35)
// }));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
document.getElementById("latbox").value = marker.getPosition().lat();
document.getElementById("lngbox").value = marker.getPosition().lng();
document.getElementById("textmatch").value = place.name;
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(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// End single autocomplete grab
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
// Get free text address from textbox, mark on map and autofill lat and long
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(17);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
document.getElementById("latbox").value = marker.getPosition().lat();
document.getElementById("lngbox").value = marker.getPosition().lng();
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body onload="initialize()" onunload="GUnload()">
<form name="input" action="index.php" method="post">
<p>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td>Street Address = </td><td><textarea name="streetaddress" id="address" rows=3 cols=60></textarea></td><td>Lat/long from Gmaps =<br><input type="button" value="Get Long and Lat" onclick="codeAddress()"></td><td>
<p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>
</td></tr>
<tr><td></td></tr>
<tr><td colspan=2>
</td><td></td></tr>
</form>
<table width="100%"><tr><td>
</td><td>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map_canvas" style="width: 700px; height: 600px"></div>
</td></tr></table>
</body></html>
我自己解决了这个问题…问题是库声明中的"sensor=true"。将其设置为false可以修复此问题。
相关文章：
- electronic BrowserWindow的最小高度和宽度在hide(）show(）方法之后不起作用
- 奇怪的Javascript结果
- 在chrome.tabs.onCreated之后加载HTML页面
- Javascript(jQuery）给了我奇怪的结果
- 在Jquery detachment(）和appendTo(）之后定位元素
- AngularJS:ng之后，重复$scope值未按预期更新
- JSONP请求返回结果，但也触发error_callback
- 如何在chrome扩展中存储数据/结果，以及如何使用setTimeout使其只被调用一次
- 为什么元素的宽度在页面加载之后和那一刻之后不同
- 没有在Angular应用程序中定义firebase(在firebase迁移之后）
- Javascript，输出结果后页面不断刷新
- 这是使用html快照和谷歌获取的预期结果吗?SEO/SPA
- 在javascript中的简单数学中，在循环中将数字X次相加会产生与事先乘以X并在之后相加不同的结果
- 如何解析javascript/jquery以在ajax结果内/之后回显/执行
- 为什么defered.promise在defered.resolve(myobject）之后的结果与myobject不同
- 在每个函数的特定结果之后插入元素
- 在AJAX调用之后，我无法在视图中看到结果
- Ajax请求在其他请求(.NET+jQuery）的成功结果之后
- 在使用splice(）之前和之后获取结果数组
- 谷歌位置自动补全-昨晚之后没有结果
