向 Google 自动完成添加自定义（获取位置）选项
Ror*_*ory 6 autocomplete google-maps-api-3 google-places-api
我目前在我的页面上有一个样式化的 pac 输入，可与地点库中的 Google 自动完成功能一起使用。我一直试图在下拉列表的顶部添加一个获取位置的选项，但没有运气。
Javascript（我不是 js wiz）-
var lat = 'empty';
var lng = 'empty';
var placeSearch, autocomplete;
var place;
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('pac-input')),
{ types: ['geocode', 'establishment'],
componentRestrictions: {country: 'GB'}});
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
place = autocomplete.getPlace();
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
document.getElementById('please').style.display = "none";
document.getElementById('lat').innerHTML="Latitude: " + lat +
"<br>Longitude: " + lng;
});
}
function getlocation() {
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
$('#wait').show();
$('#getlocation').hide();
}
else{document.getElementById('lat').innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat = position.coords.latitude;
lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById('pac-input').value = (results[0].formatted_address.split(",")[0]);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
$('#wait').hide();
$('#getlocation').show();
document.getElementById('lat').innerHTML="Latitude: " + lat +
"<br>Longitude: " + lng;
document.getElementById('please').style.display = "none";
}
function blurred() {
/////////bug if type and select location, click out, retype and click out. can i store the name as variable and check value against that?
var beginning = document.getElementById('pac-input').value.split(",")[0];
place = autocomplete.getPlace();
if (! place) {
lat = 'empty';
lng = 'empty';
document.getElementById('lat').innerHTML="Latitude: " + lat +
"<br>Longitude: " + lng;
} else { if (! place.geometry) {
lat = 'empty';
lng = 'empty';
document.getElementById('lat').innerHTML="Latitude: " + lat +
"<br>Longitude: " + lng;
}else{ if (beginning != place.name) {
lat = 'empty';
lng = 'empty';
document.getElementById('lat').innerHTML="Latitude: " + lat +
"<br>Longitude: " + lng;
}}}
if (lat == 'empty') {
document.getElementById('please').style.display = "inline-block";
}}
function focused() {
document.getElementById('pac-input').value = "";
if (lat != 'empty'){
lat = 'empty';
lng = 'empty';
}}
HTML -
<body onload="initialize()">
<div id="center">
<div id="areacontainer">
<input id="pac-input" placeholder="Area..." value=""
onFocus="focused()" onblur="blurred()" type="text" onchange="go()">
</input>
<div id="getlocation" onclick="getlocation()"></div><div id="wait"></div>
</div>
<div id="lat"></div>
<div id="please">Please enter a valid location.</div>
</div>
</body>
谢谢你的帮助。
我意识到这个问题已经存在一年了，OP 肯定已经解决了这个问题，所以这适合其他感兴趣的人。
虽然可以在选择上设置一个处理程序keyup来修改它们接收和显示之间的选项，但解决方案可能会很麻烦。IE 还存在显示下拉选项列表的非 DOM 窗口的问题，这可能会造成妨碍。
相反，请考虑使用AutocompleteService以编程方式获取预测。它不提供像自动完成这样的预定义 UI ，而是返回一个结果列表，您可以根据需要修改该结果列表，并以适合您的应用程序的方式（如下拉列表或其他方式）显示。
| 归档时间： |
|
| 查看次数： |
2204 次 |
| 最近记录： |