使用Google Maps API填充經度和緯度

Question

我有以下html和javascript。 javascript將位置詳細信息從google maps api填充到html表單字段。 這個想法是有人輸入在html表單字段中填充的原始位置，然后輸入在第二表單中填充的第二位置。 這很完美。

現在，我還想用第一和第二位置的經度和緯度填充表格。

*<!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">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>

  <body>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="locationField">
  <input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addressone">
  <input type="text" id="street_number" name="street_number" />
  <input type="text" id="route" name="street_name" />
  <input type="text" id="locality" name="town_city" />
  <input type="text" id="administrative_area_level_1" name="administrative_area_level_1" />
  <input type="text" id="postal_code" name="postcode" />
  <input type="text" id="country" name="country" />
  <input type="text" id="longitude" name="longitude" />
  <input type="text" id="latitude" name="latitude" />

</div>
<div id="locationField2">
  <input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addresstwo">
  <input type="text" id="street_number2" name="street_number2" />
  <input type="text" id="route2" name="street_name2" />
  <input type="text" id="locality2" name="town_city2" />
  <input type="text" id="administrative_area_level_12" name="administrative_area_level_12" />
  <input type="text" id="postal_code2" name="postcode2" />
  <input type="text" id="country2" name="country2" />
  <input type="text" id="longitude2" name="longitude2" />
  <input type="text" id="latitude2" name="latitude2" />
</div>

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

var placeSearch, autocomplete, autocomplete2;
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', function() {
    fillInAddress(autocomplete, "");
  });

  autocomplete2 = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete2')), {
      types: ['geocode']
    });
  autocomplete2.addListener('place_changed', function() {
    fillInAddress(autocomplete2, "2");
  });

}

function fillInAddress(autocomplete, unique) {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    if (!!document.getElementById(component + unique)) {
      document.getElementById(component + unique).value = '';
      document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType + unique).value = val;
    }
  }
}
google.maps.event.addDomListener(window, "load", initAutocomplete);

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());
    });
  }
}
// [END region_geolocation]

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAqYwW9d0lnFABF-0NKCTrO__G_d3d958k&signed_in=true&libraries=places&callback=initAutocomplete"
        async defer></script>
  </body>
</html>*

該代碼填充所有必填字段，但不填充經度和緯度。 有沒有解決的辦法？

Answer 1

您沒有任何代碼可填充緯度和經度字段。 將此添加到fillInAddress ：

document.getElementById('latitude'+unique).value = place.geometry.location.lat();
document.getElementById('longitude'+unique).value = place.geometry.location.lng();

完整功能：

function fillInAddress(autocomplete, unique) {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    if (!!document.getElementById(component + unique)) {
      document.getElementById(component + unique).value = '';
      document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType + unique).value = val;
    }
  }
  document.getElementById('latitude'+unique).value = place.geometry.location.lat();
  document.getElementById('longitude'+unique).value = place.geometry.location.lng();
}

概念證明

代碼段：

 // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. var placeSearch, autocomplete, autocomplete2; 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', function() { fillInAddress(autocomplete, ""); }); autocomplete2 = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */ (document.getElementById('autocomplete2')), { types: ['geocode'] }); autocomplete2.addListener('place_changed', function() { fillInAddress(autocomplete2, "2"); }); } function fillInAddress(autocomplete, unique) { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { if (!!document.getElementById(component + unique)) { document.getElementById(component + unique).value = ''; document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType + unique).value = val; } } document.getElementById('latitude' + unique).value = place.geometry.location.lat(); document.getElementById('longitude' + unique).value = place.geometry.location.lng(); } google.maps.event.addDomListener(window, "load", initAutocomplete); 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()); }); } } // [END region_geolocation]

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div id="locationField"> <input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text" /> </div> <div id="addressone"> <input type="text" id="street_number" name="street_number" /> <input type="text" id="route" name="street_name" /> <input type="text" id="locality" name="town_city" /> <input type="text" id="administrative_area_level_1" name="administrative_area_level_1" /> <input type="text" id="postal_code" name="postcode" /> <input type="text" id="country" name="country" /> <input type="text" id="longitude" name="longitude" /> <input type="text" id="latitude" name="latitude" /> </div> <div id="locationField2"> <input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text" /> </div> <div id="addresstwo"> <input type="text" id="street_number2" name="street_number2" /> <input type="text" id="route2" name="street_name2" /> <input type="text" id="locality2" name="town_city2" /> <input type="text" id="administrative_area_level_12" name="administrative_area_level_12" /> <input type="text" id="postal_code2" name="postcode2" /> <input type="text" id="country2" name="country2" /> <input type="text" id="longitude2" name="longitude2" /> <input type="text" id="latitude2" name="latitude2" /> </div>

使用Google Maps API填充經度和緯度

問題描述

1 個解決方案

解決方案1
1 已采納 2016-02-11 14:20:52

使用Google Maps API填充經度和緯度

問題描述

1 個解決方案

解決方案1 1 已采納 2016-02-11 14:20:52

解決方案1
1 已采納 2016-02-11 14:20:52