问题
Why is google not returning an object with a formatted address when using auto-complete and how can I get a formatted address?
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:
I realise I'm using autocomplete on the first form and that's affecting it but how do i get to not affect or give me the 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;
}
}
}
回答1:
If you want the formatted_address returned, you need to specify that field.
Instead of:
// 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"]);
Do:
autocomplete.setFields(["address_component", "formatted_address"]);
You are only calling setFields on one of your autocomplete inputs. If you don't call it, you get (and pay for) all the fields in the PlaceResult
proof of concept fiddle
// This sample uses the Autocomplete widget to help the user select a
// place, then it retrieves the address components associated with that
// place, and then it populates the form fields with those details.
// This sample requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script
// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'), {
types: ['geocode']
});
// 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', 'formatted_address']);
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById('formatted_address').innerHTML = "formatted_address:<br>" + place.formatted_address;
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;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"><style>#locationField,
#controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
font-family: "Roboto";
}
#address {
border: 1px solid #000090;
background-color: #f0f9ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
</div>
<div id="formatted_address"></div>
<!-- Note: The address components in this sample are typical. You might need to adjust them for
the locations relevant to your app. For more information, see
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number" disabled="true" /></td>
<td class="wideField" colspan="2"><input class="field" id="route" disabled="true" /></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality" disabled="true" /></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true" /></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code" disabled="true" /></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field" id="country" disabled="true" /></td>
</tr>
</table>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>来源：https://stackoverflow.com/questions/58896052/why-is-google-autocomplete-returning-undefined-when-using-getplace-on-the-inpu