Question

我想使用用户输入的地址在输入字段中显示经度和纬度。我搜索了很多，发现一些解决方案，当我在本地服务器上运行它们时，当我在我的项目中包含该代码时，它将无法正常工作。我正在使用目录+主题。这个主题具有显示地图的功能，它给我一个错误

您已在此页面上多次添加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代码;并且工作正常。

如何从地址

1 个答案: