2013-04-11 120 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来解决这个问题,谢谢无论如何,帮助!