为什么谷歌在使用自动完成功能时不返回带有格式化地址的对象以及如何获取格式化地址?
When I log the variable from_place
it returns an object like so:
but when I log to_place
it returns an object with formatted_address:
我意识到我在第一个表单上使用自动完成功能,这会影响它,但我如何才能不影响或给我格式化的地址?
// declare variables
var map, infoWindow, placeSearch, autocomplete;
// autocomplete form
var componentForm = {
locality: "short_name",
postal_code: "short_name"
};
// autocomplete form
// init google map API's
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 6
});
infoWindow = new google.maps.InfoWindow();
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// console.log(pos)
infoWindow.setPosition(pos);
infoWindow.setContent("Location found.");
infoWindow.open(map);
map.setCenter(pos);
},
function() {
handleLocationError(true, infoWindow, map.getCenter());
}
);
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
google.maps.event.addDomListener(window, "load", function() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById("from_places"),
{ types: ["geocode"] }
);
var to_places = new google.maps.places.Autocomplete(
document.getElementById("to_places")
);
google.maps.event.addListener(autocomplete, "place_changed", function() {
// var from_place needs to return an object with a formatted adress
var from_place = autocomplete.getPlace();
console.log(from_place);
var from_address = from_place.formatted_address;
$("#origin").val(from_address);
});
google.maps.event.addListener(to_places, "place_changed", function() {
var to_place = to_places.getPlace();
console.log(to_place);
var to_address = to_place.formatted_address;
$("#destination").val(to_address);
});
autocomplete.setComponentRestrictions({
country: ["uk"]
});
to_places.setComponentRestrictions({
country: ["uk"]
});
// Avoid paying for data that you don't need by restricting the set of
// place fields that are returned to just the address components.
autocomplete.setFields(["address_component"]);
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
});
// add all functions related to google in here
// collection to drop off
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: 41.85, lng: -87.65 }
});
directionsRenderer.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsRenderer);
};
// One destination must be set at anyone time because
// 70 InvalidValueError: in property destination: must set one of location, placeId or query
document
.getElementById("googleAlgorithm2")
.addEventListener("click", onChangeHandler);
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
directionsService.route(
{
origin: {
query: document.getElementById("from_places").value
},
destination: {
query: document.getElementById("to_places").value
},
travelMode: "DRIVING",
drivingOptions: {
departureTime: new Date(/* now, or future date */),
trafficModel: "pessimistic"
// departureTime: new Date(/* now, or future date */),
}
},
function(response, status) {
if (status === "OK") {
directionsRenderer.setDirections(response);
} else {
window.alert("Directions request failed due to " + status);
}
}
);
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(
browserHasGeolocation
? "Error: The Geolocation service failed"
: "Error Your browser does not support geolocation."
);
infoWindow.open(map);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = "";
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}