Question

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

}

Answer 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
});

Answer 2

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

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

Answer 3

我刚刚意识到问题是什么，这是因为我在任何javascript运行之前在服务器端加载指针，我需要运行：usersWithinRadius通过ajax解决问题，谢谢你的帮助！

在jquery函数之前运行javascript函数

3 个答案: