2015-09-21 79 views
1

我想使用用戶輸入的地址在輸入字段中顯示經度和緯度。我搜索了很多,發現了一些解決方案,當我在本地服務器上運行它們時,以及當我將該代碼包含在我的項目中時,它將無法工作。我正在使用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> 

請你告訴我在哪裏,我錯了。

回答

0

我找到了修復程序。這是主題的谷歌地圖的問題。爲了解決這個問題,我在get_footer()後調用了我的javascript代碼。它的工作正常。