我正在使用带有自动填充功能的Google Maps API。
自动完成工作正在运行,但许多商家地址没有附加数字,这导致搜索问题。
示例:
Google自动填充选项:Alley Katz,O Street,Sacramento,CA,美国
应该是:Alley Katz,2019 O St,Sacramento,CA,United States
但相反它填满了Alley Katz,O Street,Sacramento,CA,美国,搜索标记位于O街上,而不是2019 O St的正确地址附近。
为什么自动填充会从地址中删除号码?我知道formatted_address参数但是如何在执行搜索后访问自动完成选项对象,然后将其传入以获取正确的目标?或者有没有办法显示完整地址的自动填充选项?
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<input type="text" id="address" placeholder="Address" /> <a href="#" onclick="searchAddress();">Search</a>
<!DOCTYPE html>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var options = {
componentRestrictions: {country: "us"}
};
var input = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var testvar = autocomplete.getPlace().formatted_address;
var customLat = autocomplete.getPlace().geometry.location.lat();
var customLng = autocomplete.getPlace().geometry.location.lng();
console.log('testvar: ' + testvar);
console.log(customLat);
console.log(customLng);
});
}
function searchAddress() {
var address = document.getElementById('address').value;
console.log('start address: ' + address);
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
search_lat = results[0].geometry.location.lat();
search_lng = results[0].geometry.location.lng();
console.log('end address coordinates: ' + search_lat + ', ' + search_lng);
for (var i=0; i<endMarkers.length;i++) {
if (i > 0) {
testy = i - 1;
endMarkers[testy].setMap(null);
}
}
map.setCenter(end_address_marker.getPosition());
map.setZoom(15);
map.setCenter(results[0].geometry.location);
} else {
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap&libraries=places"
async defer></script>
</body>
</html>