Google地址自动完成/ LongLat

时间:2016-12-06 09:53:48

标签: javascript google-maps

我按距离创建匹配服务,我使用以下代码获取用户地址然后使用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>

1 个答案:

答案 0 :(得分:0)

var latLong = place.geometry.location;

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

大多数人都喜欢你的地方可能没有这个geometry属性   例如,您必须使用place_id(不建议使用)或   reference(首选)。

reference包含一个唯一的令牌,可用于检索其他信息。

地方详情请求是以下格式的HTTP网址:

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

Read more here