0

我在移动设备上获取用户位置并将其发送到数据库，然后运行 ​​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);

}
4

3 回答 3

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
});
于 2013-04-11T16:13:06.777 回答
0

gmap3 中有一个“回调”属性。如果我对您的理解正确，您需要将 getGeoLocation 函数调用放在回调中，以便地图信息可用。例如：

$(function() {
    $('#map').gmap3({
        marker:
        {                   
            values: result,
        },
        map:
        {
          options:
          {
            zoom:12,
            mapTypeControl: false,
            navigationControl: true,
            streetViewControl: false
        },
        callback: function() {
            getGeoLocation()
        }
    });
});
于 2013-04-11T16:17:57.543 回答
0

我刚刚意识到问题出在哪里，这是因为我在运行任何 javascript 之前在服务器端加载指针，我需要运行：usersWithinRadius via ajax 来解决问题，无论如何感谢您的帮助！

于 2013-04-11T16:18:32.207 回答