지오 코더 기능 실행이 완료 될 때까지 기다렸다가 계속 진행하십시오.

Question

Appgyver 스테로이드 프레임 워크를 사용하는 하이브리드 응용 프로그램에서 작업 중이며 '사용자 위치 감지'기능을 구현하려고합니다. 사용자가 스위치로 토글 여부를 선택할 수 있습니다. 그들은 자신의 위치 (긴 & lat)를 자동으로 감지하거나 텍스트 상자에 자신의 위치 (시, 우편 번호 또는 카운티)를 입력 할 수 있으며 경도 및 위도는 해당 위치를 기준으로 버튼 클릭으로 계산됩니다 입력/선택.

사용자가 스위치를 '켜짐'위치로 전환하고 제출을 탭하면 navigator.geolocation.getCurrentPosition이 실행되고 관련 기능이 호출되어 현재 경도와 위도가 localStorage에 저장됩니다. 이것은 완벽하게 작동합니다.

그러나 사용자가 스위치를 'off'위치로 전환하면 내 위치 코드를 long 및 lat로 코딩하는 지오 코드 함수 [manuallyGeoCode()]가 시간에 따라 실행되지 않아 경고가 곧바로 실행됩니다. 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.'); 
     } 
    }); 
}