谷歌地址自動完成/ LongLat

-1

我創建了一個匹配的服務的距離，我使用下面的代碼來獲取用戶地址，然後longlat，我設法得到用戶的地址，但我怎麼也可以保存長地址的地址？谷歌地址自動完成/ LongLat

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

            <div class="address"> 
             <div class="row"> 
              <div class="col-sm-6"> 
               <input type="text" class="field" id="street_number" name="streetNumber" placeholder="Property Number" /> 
              </div> 
              <div class="col-sm-6"> 
               <input type="text" class="field" id="route" name="streetName" placeholder="Road Name" /> 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-6"> 
               <input type="text" class="field" id="locality" name="townCity" placeholder="Town/City" /> 
              </div> 
              <div class="col-sm-6"> 
               <input type="text" class="field" id="administrative_area_level_2" name="county" placeholder="County" /> 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-6"> 
               <input type="text" class="field" id="postal_code" name="postcode" placeholder="Postcode" /> 
              </div> 
              <div class="col-sm-6"> 
               <input type="text" class="field" id="country" name="country" placeholder="Country" /> 
              </div> 
             </div> 
            </div> 

<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_2: '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>

來源

2016-12-06 Brad Fletcher

var latLong = place.geometry.location; 

/** latLong will have 
{ 
    "lat" : -33.8669710, 
    "lng" : 151.1958750 
    } 
*/

最喜歡你的地方可能沒有在情況下，你必須用火place_id（不建議使用）或 reference（首選）新的查詢此geometry屬性。

reference包含一個唯一的標記，您可以使用它來檢索其他信息。

地方詳情請求是採用以下形式的HTTP URL：

https://maps.googleapis.com/maps/api/place/details/output?parameters

谷歌地址自動完成/ LongLat

回答

相關問題