javascript - 关于HTML5获取经纬度来进行百度地图web API请求的操作

Question

本人在做一个通过HTML5的获取经纬度坐标，用Ajax请求进行百度地图API接口传参查询，需要得到返回结果中的城市。不过遇到了一些困难，在使用navigator.geolocation.getCurrentPosition方法获取经纬度后，无法把获取到的经纬度通过变量或者函数方法放到Ajax的data中。

<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            alert('该设备不支持获取地理位置...')
        }
        function showPosition(position) {
            var lat = position.coords.latitude,
                lng = position.coords.longitude;

            return lat + ',' + lng;
        }
    }

    $.ajax({
        type: 'GET',
        url: 'http://api.map.baidu.com/geocoder/v2/?ak=G4KcZnKjd7aC8yxtTfI3slYX',
        data: {
            output: 'json',
            pois: 0,
            callback: 'renderReverse',
            location: getLocation()
        },
        dataType: 'jsonp',
        success: function(data) {
            console.log(data);
            console.log(data.result.addressComponent.city);
            alert(data.result.addressComponent.city)
        },
        error: function() {

        }
    });

</script>

关键就是location这获取不到getLocation()方法的值，请教一下问题出在哪？

Answer 1

题主的代码中，首先getLocation()没有返回值，也就是undefined
其次，navigator.geolocation.getCurrentPosition是一个异步方法，其本身返回值只可能是undefined

题主的代码可以改成这样:

function getLocation(cb) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            alert('该设备不支持获取地理位置...')
        }
        function showPosition(position) {
            var lat = position.coords.latitude,
                lng = position.coords.longitude;

            cb(lat + ',' + lng);
        }
    }

     getLocation(function(location){
          $.ajax({
            type: 'GET',
            url: 'http://api.map.baidu.com/geocoder/v2/?ak=G4KcZnKjd7aC8yxtTfI3slYX',
            data: {
                output: 'json',
                pois: 0,
                callback: 'renderReverse',
                location: location
           },
            dataType: 'jsonp',
            success: function(data) {
                console.log(data);
                console.log(data.result.addressComponent.city);
                alert(data.result.addressComponent.city)
            },
            error: function() {
    
            }
           });
         
     })