为啥在输入地址上使用 getPlace() 时谷歌自动完成返回未定义

Posted 2023-02-23

【中文标题】为啥在输入地址上使用 getPlace() 时谷歌自动完成返回未定义

【英文标题】：Why is google autocomplete returning undefined when using getPlace() on the input address为什么在输入地址上使用 getPlace() 时谷歌自动完成返回未定义

【发布时间】：2020-03-12 17:31:13

【问题描述】：

为什么 google 在使用自动完成时没有返回带有格式化地址的对象，我如何才能获得格式化的地址？

当我记录变量 from_place 时，它会返回一个像这样的对象：

但是当我登录 to_place 时，它返回一个带有 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;
        
    

【问题讨论】：

请勿发布代码、数据、错误消息等的图片 - 将文本复制或输入到问题中。 ***.com/help/how-to-ask

【参考方案1】：

如果您希望返回 formatted_address，您需要指定该字段。

代替：

// 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"]);

做：

autocomplete.setFields(["address_component", "formatted_address"]);

您只是在您的一个自动完成输入上调用setFields。如果您不调用它，您将获得（并支付）所有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>