如何從地址中獲取經度和緯度

Question

我想使用用戶將輸入的地址在輸入字段中顯示經度和緯度。 我進行了很多搜索，找到了一些解決方案，當我在本地服務器中運行它們時，當我在項目中包含該代碼時，它們將無法工作。 我正在使用Directory +主題。 這個主題有顯示地圖的功能，給我一個錯誤

您已在此頁面上多次包含Google Maps API。 這可能會導致意外錯誤。

這是我的代碼

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);
}

  // [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
   console.log(place);
   alert(place.geometry.location);
   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;
   }
  }
}
// [END region_fillform]

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

</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initAutocomplete"
    async defer></script>

請告訴我我錯了。

Answer 1

我找到了解決方法。 這是主題的谷歌地圖的問題。 為了解決這個問題，我在get_footer（）之后調用了我的JavaScript代碼； 及其工作正常。