在init上的PlacepickerJS獲取place.address_components

我使用jquery-placepicker將不同的輸入隱藏追加到地址詳細信息中。在init上的PlacepickerJS獲取place.address_components

可悲的是，與沒有submiting默認地址初始化，則placepicker返回我只有place.geometry.location.lng()和place.geometry.location.lat()信息，而不是place.address_components

$("#inputAddress").placepicker({ 
    map: $('#map').get(0), 
    placeChanged: function (place) { 
     $('#input_address_lng').val(place.geometry.location.lng()); 
     $('#input_address_lat').val(place.geometry.location.lat()); 

     // reset fields 
     $('#input_address_num').val(''); 
     $('#input_address_rue').val(''); 
     $('#input_address_ville').val(''); 
     $('#input_address_codepays').val(''); 
     $('#input_address_cp').val(''); 

     if (place.address_components) { 
      updateAddressForm(place.address_components); 
     } 
    } 
}); 

function updateAddressForm(address) { 
$.each(address, function (index, value) { 
    if (value.types[0] == 'street_number') { 
     $('#input_address_num').val(value.long_name); 
    } else if (value.types[0] == 'route') { 
     $('#input_address_rue').val(value.long_name); 
    } else if (value.types[0] == 'locality') { 
     $('#input_address_ville').val(value.long_name); 
    } else if (value.types[0] == 'postal_code') { 
     $('#input_address_cp').val(value.long_name); 
    } else if (value.types[0] == 'country') { 
     $('#input_address_codepays').val(value.short_name); 
    } 
}); 
}

我嘗試這個解決方案，它讓我找回詳細地址：

$("#inputAddress").placepicker({ 
    map: $('#map').get(0), 
    placeChanged: function (place) { 
     $('#input_address_lng').val(place.geometry.location.lng()); 
     $('#input_address_lat').val(place.geometry.location.lat()); 

     // reset fields 
     $('#input_address_num').val(''); 
     $('#input_address_rue').val(''); 
     $('#input_address_ville').val(''); 
     $('#input_address_codepays').val(''); 
     $('#input_address_cp').val(''); 

     if (place.address_components) { 
      updateAddressForm(place.address_components); 
     } else { 

      var request = { 
       placeId: place.place_id 
      }; 

      service = new google.maps.places.PlacesService(map); 
      service.getDetails(request, callback); 

      function callback(place, status) { 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 
        updateAddressForm(place.address_components); 
       } 
      } 
     } 
    } 
});

但現在的谷歌地圖不工作了......

有什麼想法？

Thx很多爲您的幫助！

來源

2016-11-14 spitfire378

嘗試啓用Dev tool以查看您遇到的確切問題。你可能想看看谷歌提供的樣本實現 - Place Autocomplete Address Form

這個例子從谷歌數據庫的地方捕捉選定地址組件集成到一個地址的形式。在這個例子中地址組件的選擇是典型的。您可能需要調整它以符合每個國家的郵政地址。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place Autocomplete Address Form</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     /* 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; 
     } 
     #address { 
     border: 1px solid #000090; 
     background-color: #f0f0ff; 
     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; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" 
      onFocus="geolocate()" type="text"></input> 
    </div> 

    <table id="address"> 
     <tr> 
     <td class="label">Street address</td> 
     <td class="slimField"><input class="field" id="street_number" 
       disabled="true"></input></td> 
     <td class="wideField" colspan="2"><input class="field" id="route" 
       disabled="true"></input></td> 
     </tr> 
     <tr> 
     <td class="label">City</td> 
     <!-- Note: Selection of address components in this example is typical. 
      You may need to adjust it for the locations relevant to your app. See 
      https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform 
     --> 
     <td class="wideField" colspan="3"><input class="field" id="locality" 
       disabled="true"></input></td> 
     </tr> 
     <tr> 
     <td class="label">State</td> 
     <td class="slimField"><input class="field" 
       id="administrative_area_level_1" disabled="true"></input></td> 
     <td class="label">Zip code</td> 
     <td class="wideField"><input class="field" id="postal_code" 
       disabled="true"></input></td> 
     </tr> 
     <tr> 
     <td class="label">Country</td> 
     <td class="wideField" colspan="3"><input class="field" 
       id="country" disabled="true"></input></td> 
     </tr> 
    </table> 

    <script> 
     // This example displays an address form, using the autocomplete feature 
     // of the Google Places API to help users fill in the information. 

     // This example 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 to geographical 
     // location types. 
     autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
      {types: ['geocode']}); 

     // When the user selects an address from the dropdown, 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(); 

     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 fill 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()); 
      }); 
     } 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" 
     async defer></script> 
    </body> 
</html>

希望這有助於。

來源

2016-11-20 15:26:58

在init上的PlacepickerJS獲取place.address_components

回答

相關問題