最近有做一个项目,需要根据用户当前位置自动填写省市区,然后心里有选择:H5原生定位、百度地图、腾讯地图和高德地图。
既然是做公众号,还是比较偏向用腾讯自家的地图--腾讯地图。不是因为它好,主要就是怕用其它的不稳定。
为什么呢?主要怕腾讯那一天搞什么限制,限制使用其它地图,倒是定位功能无法正常使用。
觉得多虑的话,可以想想淘宝抖音为什么在微信打不开。好了,不说这么多废话了,回归正题~

一、申请key

申请网址:https://lbs.qq.com/console/mykey.html
调用地图服务需要用到KEY,所以需要申请。申请流程也很简单,不用怎么说了,直接打开上面的网址申请即可。

二、引入JS

<script charset="utf-8" src="https://apis.map.qq.com/tools/geolocation/min?key={你的KEY}&referer={你的网站名}"></script>

三、Javascript调用代码

官方有提供三种用法,几种用法经过测试,第三种相对比较稳定,所以这里写的是第三种用法。
官方文档:https://lbs.qq.com/tool/component-geolocation.html
第一次尝试根据GPS定位,如果失败(用户拒绝了获取精确位置),则尝试根据IP地址定位。
获取成功后,直接根据返回对象里数据拼接即可

let geolocation = new qq.maps.Geolocation();
geolocation.getLocation(
    // 获取成功回调
    function (position) {
        // {"module":"geolocation","type":"cache","adcode":"4402**","nation":"中国","province":"广东省","city":"韶关市","district":"**区","addr":"***","lat":24.***57,"lng":113.***708,"accuracy":3720}
        console.log(position);
    },
    // 获取失败回调
    function () {
        console.info('获取精确定位失败,尝试通过IP地址获取位置信息');

        geolocation.getIpLocation(
            // 获取成功回调
            function (position) {
                // {"module":"geolocation","adcode":440204,"type":"ip","nation":"中国","province":"广东省","city":"韶关市","district":"","addr":"","lat":24.80446,"lng":113.61095,"accuracy":10000}
                console.log(position);
            },
            // 获取失败回调
            function () {
                console.info('尝试通过IP地址获取位置信息失败');
                alert("您的当前位置获取失败,请手动填写安装地区");
            }
        )

    },
    {
        // 获取定位超时时间,超过这个时间则直接失败,单位:秒
        timeout: 30,
        failTipFlag: true
    }
);

标签: none

添加新评论