2013-04-11 124 views
0

之前javascript函數我在移動設備上獲取用戶的位置,並把它發送到數據庫,然後我運行一個jQuery函數來繪製地圖上的指針。運行jQuery函數

但是地圖似乎總是在我更新用戶的位置意味着該位置是先前設置的一個加載。

getGeoLocation是更新與正確的位置數據庫的功能,但它的jQuery函數後,只有永遠運行。似乎無法解決這個問題......我只能在通話完成後才能使地圖加載?

<script> 
$(document).ready(function(){ 

    getGeoLocation(); 

    alert('map'); 

    var result = JSON.parse('<?php usersWithinRadius(); ?>'); 

    $('#map').gmap3({ 
     marker: 
     {     
      values: result, 
     }, 
     map: 
     { 
      options: 
      { 
      zoom:12, 
      mapTypeControl: false, 
      navigationControl: true, 
      streetViewControl: false 
      } 

     } 

    }); 

}); 
</script> 

這就是getGeoLocation是指代碼:

//Initialize geolocation 
function getGeoLocation() 
{  

    if(navigator.geolocation) 
    { 

     navigator.geolocation.getCurrentPosition(
      recordGeoLocation, 
      geoLocationErrorHandler, { 
       enableHighAccuracy: true, 
       timeout: 20000, 
       maximumAge: 120000 
      } 
     ); 

     return true; 

    } 
    else 
    { 

     alert('Geolocation not supported'); 

     return false; 

    } 

} 

//Map position retrieved successfully 
function recordGeoLocation(position) 
{ 

    var data = new Object(); 

    data.latitude = position.coords.latitude; 
    data.longitude = position.coords.longitude; 

    /** Other data 
    data.altitude = position.coords.altitude; 
    data.accuracy = position.coords.accuracy; 
    data.altitudeAccuracy = position.coords.altitudeAccuracy; 
    data.heading = position.coords.heading; 
    data.speed = position.coords.speed; 
    **/ 

    recordUserGeoLocation(data.latitude, data.longitude); 

} 

//Send the latitude and longitude to database 
function recordUserGeoLocation(latitude, longitude) 
{ 

    var BASE_URL = $('#BASE_URL').val(); 

    var ajaxURL = BASE_URL + 'ajax/recordUserGeoLocation/'; 

    $.ajax({ 
     type: 'POST', 
     url: ajaxURL, 
     data: { 
      latitude: latitude, 
      longitude: longitude 
     }, 
     dataType: 'json', 
     success: function(data){ 

      //The record has been added 
      console.log('Recorded location: ' + latitude + ' , ' + longitude); 

      alert('Recorded location: ' + latitude + ' , ' + longitude); 

     } 
    }); 

} 

//Error handler 
function geoLocationErrorHandler(err) 
{ 

    var message; 

    switch(err.code) 
    { 
     case 0: 
      message = 'Unknown error: ' + err.message; 
      break; 
     case 1: 
      message = 'You denied permission to retrieve a position.'; 
      break; 
     case 2: 
      message = 'The browser was unable to determine a position: ' + error.message; 
      break; 
     case 3: 
      message = 'The browser timed out before retrieving the position.'; 
      break; 
    } 

    alert(message); 

} 
+0

安置自己的'getGeoLocation()'函數爲好。您將需要使用谷歌給你的回撥,一旦它獲得我相信的位置。 – techfoobar 2013-04-11 16:08:54

+0

補充說,更新位置的代碼不是來自谷歌,它使用內置的瀏覽器地理位置。 – 2013-04-11 16:11:22

回答

1

你可以把你的代碼的其餘部分$(document).ready()函數內,在成功函數末尾調用它的recordUserGeoLocation()功能。

// code to execute after you get the geo location 
function initMaps() { 
    var result = JSON.parse('<?php usersWithinRadius(); ?>'); 
    $('#map').gmap3({ 
     ... 
    } 
} 

function recordUserGeoLocation(latitude, longitude) { 
    ... 
    $.ajax({ 
     ... 
     success: function(data) { 
     ... 
     initMaps(); // now that all is done, call it 
     } 
    }); 
    ... 
} 

$(document).ready(function(){ 
    getGeoLocation(); // call just this from ready 
}); 
+0

我才意識到這個問題是什麼,那是因爲我加載服務器端的指針之前,任何的JavaScript運行的,我需要運行:通過AJAX usersWithinRadius來解決這個問題,感謝您的幫助反正! – 2013-04-11 16:15:23

+0

隨着你的答案和我不得不加載的PHP固定它,感謝您的幫助。 – 2013-04-11 16:28:53

0

gmap3中有一個「回調」屬性。如果我正確理解你,你需要將getGeoLocation函數調用放在回調中,以便地圖信息可用。例如:

$(function() { 
    $('#map').gmap3({ 
     marker: 
     {     
      values: result, 
     }, 
     map: 
     { 
      options: 
      { 
      zoom:12, 
      mapTypeControl: false, 
      navigationControl: true, 
      streetViewControl: false 
     }, 
     callback: function() { 
      getGeoLocation() 
     } 
    }); 
}); 
0

我才意識到這個問題是什麼,那是因爲我加載服務器端的指針之前,任何的JavaScript運行的,我需要運行:通過AJAX usersWithinRadius來解決這個問題,謝謝無論如何,幫助!