前端定位请求

时间：2020-5-10

前言（背景）：
笔者的个人网站想要获取下访客的个人位置信息（不做他用），经过比对各方优劣，最后采用，百度地图api+腾讯地图api的模式进行前端的定位。

一、准备工作

获取百度地图的开发者应用AK和腾讯地图的key。各自在相应的平台进行注册和认证。值得一提的是，域名白名单的设置，最好进行相应配置，防止个人key的泄露被别人使用，个人开发者的配额并不算高（废话）。

二、构思方案

根据实际想要的需求（百度地图不提供国家名的逆地址解析）：定位+逆地址解析（国家、省份、城市），采用方案：

• h5定位（成功，跳往第三点）
• 百度地图api定位
• 腾讯地图api坐标系转换
• 腾讯地图逆地址解析

二、代码实现

1、h5定位

function getPosition() {
    var options = {
        enableHighAccuracy: true,
        timeout: 100,
        maximumAge: 0
    };
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError, options);
    } else {
        console.log("此浏览器不支持定位");
    }
}

若是定位成功执行showPosition()，若是定位失败执行showError()，options是相应配置。

2、showPosition():h5定位成功，需进行坐标系转换成腾讯坐标系

function showPosition(position) {
    var x = position.coords.longitude; //经度 
    var y = position.coords.latitude;//纬度 
    $.ajax({
        type: "get",
        url: "https://apis.map.qq.com/ws/coord/v1/translate",
        data: {
            key: tengxun_key,
            output: "jsonp",
            locations: y + "," + x,
            //GPS到腾讯地图坐标系
            type: 1,
        },
        dataType: "jsonp",//数据类型为jsonp  
        success: function (res) {
            //执行自己的逻辑代码
            //...
            //地址解析
            addressResolution(res.locations[0]);
        },
        error: function (res) {
            console.log("腾讯坐标转换失败");
        }
    });
}

3、showError(error): h5定位失败，使用百度地图api定位,进行坐标系转换成腾讯坐标系。

function showError(error) {
    var geolocation = new BMap.Geolocation({
        maximumAge:0  // 清除缓存
      });
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            $.ajax({
                type: "get",
                url: "https://apis.map.qq.com/ws/coord/v1/translate",
                data: {
                    key: tengxun_key,
                    output: "jsonp",
                    locations: r.point.lat + "," + r.point.lng,
                    //百度地图坐标系到腾讯地图坐标系
                    type: 3,
                },
                dataType: "jsonp",//数据类型为jsonp  
                success: function (res) {
                    //执行自己的逻辑代码
                    //...
                    //地址解析
                    addressResolution(res.locations[0]);
                },
                error: function (res) {
                    console.log("腾讯坐标转换失败");
                }
            });
        }
        else {
            alert("百度地图定位失败");
        }
    }, { enableHighAccuracy: true })
    
}

4、腾讯地图地址解析函数

function addressResolution(point) {
    $.ajax({
        type: "get",
        url: "https://apis.map.qq.com/ws/geocoder/v1",
        data: {
            key: tengxun_key,
            output: "jsonp",
            location: point.lat + "," + point.lng,
            get_poi: 0,
        },
        dataType: "jsonp",//数据类型为jsonp  
        success: function (res) {
            //执行自己的逻辑代码
            //...
        },
        error: function (res) {
            console.log("腾讯逆地址解析失败");
        }
    });
}

后记

腾讯地图api只能使用JSONP进行调用。如上，笔者使用的ajax的JSONP请求的构造方法进行请求的。

1、关于JSONP：
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
2、JSONP的跨域请求原理：
由于所有支持Javascript的浏览器都会使用同源策略这个安全策略。但是，<script>标签的src属性并不被同源策略所约束。可以获取任何服务器上脚本并执行。
3、JSONP的原型：
就是创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

备注：由于JSONP是采用js回调，所以其中设置async: false会失效。即JSONP中设置同步请求失效