等待地理編碼器功能完成執行，然後繼續然後繼續

Question

我正在使用Appgyver類固醇框架混合應用程序，我試圖實現'檢測用戶位置'功能，從而用戶可以切換開關以選擇是否他們希望自動檢測他們的位置（長& lat），或者他們可以將他們的位置（城市，郵政編碼或縣）輸入到文本框中，經度和緯度將通過點擊按鈕來計算輸入/選擇。

當用戶切換到「開」位置並點擊提交時，navigator.geolocation.getCurrentPosition被觸發並調用相關函數，然後將其當前的經度和緯度存儲在localStorage中。這工作完美。但是，當用戶將開關切換到'off'位置時，我的地理編碼函數[manualGeoCode（）]將它們的位置編碼爲long和lat似乎沒有及時觸發，所以直接觸發警報在它已經有實際設置localStorage值之前調用該地理編碼功能之後。我研究過使用回調函數，我研究過使用jQuery deferred方法，這兩種方法我都沒有成功使用過。任何幫助將大量讚賞！謝謝閱讀。

這裏是我的代碼：

<h3>Your location</h3> 
     <ul class="list"> 
     <li class="item item-toggle">Use my current location 
      <label class="toggle toggle-balanced"> 
      <input type="checkbox" id="myLocationToggle" checked="true"> 
      <div class="track"> 
       <div class="handle"></div> 
      </div> 
      </label> 
     </li> 
     <li class="item item-input"> 
      <input type="text" id="userLocation" placeholder="City, town or postcode" disabled="true"> 
     </li> 
     </ul> 

<button class="button button-balanced" id="getLongLat">Get long/lat</button> 


$(function(){ 
    AutoGeoCode(); 
}); 

function AutoGeoCode(){ 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(onSuccess, onError); 
    } 
} 

$('#getLongLat').on('click',function(){ 
    localStorage.latToPost = ''; 
    localStorage.lngToPost = ''; 

    if(localStorage.userLatAutoDetected != '0' || localStorage.userLngAutoDetected != '0'){ 
    localStorage.latToPost = localStorage.userLatAutoDetected; 
    localStorage.lngToPost = localStorage.userLngAutoDetected; 
    } 
    else{ 
    manuallyGeoCode(); // this doesn't finish in time so it jumps to the alert below and shows empty values. 
    } 

    alert('geodata is: {'+localStorage.latToPost+'}, {'+localStorage.lngToPost+'}'); 

}); 

$('#myLocationToggle').on('click',function(){ 
    if($(this).is(':checked')){ 
    $('#userLocation').val('').prop('disabled',true); 
    AutoGeoCode(); 
    } 
    else{ 
    $('#userLocation').val('').prop('disabled',false); 
    localStorage.userLatAutoDetected = '0'; 
    localStorage.userLngAutoDetected = '0'; 
    } 
}); 

function onSuccess(position){ 
    localStorage.userLatAutoDetected = position.coords.latitude; 
    localStorage.userLngAutoDetected = position.coords.longitude; 
} 

function onError(error){ 
    alert('current location could not be auto detected. Error: ' + error); 
} 

//Autocomplete location search box 
function initialize() { 
    var address = (document.getElementById('userLocation')); 
    var autocomplete = new google.maps.places.Autocomplete(address); 
     autocomplete.setTypes(['geocode']); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    var place = autocomplete.getPlace(); 
    if (!place.geometry) { 
     return; 
    } 
    var address = ''; 
    if (place.address_components) { 
     address = [ 
        (place.address_components[0] && place.address_components[0].short_name || ''), 
        (place.address_components[1] && place.address_components[1].short_name || ''), 
        (place.address_components[2] && place.address_components[2].short_name || '') 
       ].join(' '); 
    } 
    }); //end google.maps.event 
} 

function manuallyGeoCode(){ 
    var address = $('#userLocation').val(); 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     localStorage.latToPost = results[0].geometry.location.lat(); 
     localStorage.lngToPost = results[0].geometry.location.lng(); 
     } 
     else { 
     alert('Your location could not be geocoded.'); 
     } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

請找到手柄和差異手動地理編碼功能

$('#getLongLat').on('click',function(){ 
    localStorage.latToPost = ''; 
    localStorage.lngToPost = ''; 

    if(localStorage.userLatAutoDetected != '0' || localStorage.userLngAutoDetected != '0'){ 
    localStorage.latToPost = localStorage.userLatAutoDetected; 
    localStorage.lngToPost = localStorage.userLngAutoDetected; 
    alert('geodata is: {'+localStorage.latToPost+'}, {'+localStorage.lngToPost+'}'); 
    }else{ 
    manuallyGeoCode(function(){ 
     alert('geodata is: {'+localStorage.latToPost+'},{'+localStorage.lngToPost+'}'); 

    }); // this doesn't finish in time so it jumps to the alert below and shows empty values. 
    } 
}); 

function manuallyGeoCode(cb){ 
    var address = $('#userLocation').val(); 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     localStorage.latToPost = results[0].geometry.location.lat(); 
     localStorage.lngToPost = results[0].geometry.location.lng(); 
     cb(); 
     } 
     else { 
     alert('Your location could not be geocoded.'); 
     } 
    }); 
}