美文网首页mpvue
小程序根据坐标逆解析位置

小程序根据坐标逆解析位置

作者: 两年半练习程序员 | 来源:发表于2018-10-22 09:39 被阅读359次

    在小程序开发中我们可以根据 小程序API提供的wx.getLocation(Object object)https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
    获取当前的地理位置(坐标)、速度。
    那么有了坐标之后,如何转换成对应的位置名称呢?

    腾讯地图为我们提供了此功能https://lbs.qq.com/index.html

    打开网址进入微信小程序JavaScript SDK

    cba94bc3965ffde56a31d051ab1a1c0.png

    首先我们需要先申请开发者密钥(key)

    11e830ce56acf42691b5c7e765a08d7.png

    填入相应内容申请

    ebdb483151d747f240410ad7407a23e.png

    申请成功后可以在控制台直接查看秘钥

    88dbf514074a17abd1763204be6aa14.png

    秘钥已经申请成功,下面我们进行下载微信小程序JavaScriptSDK v1.0
    微信小程序JavaScriptSDK v1.0

    准备工作已经完成,在使用之前记得配置小程序安全域名,在“设置” -> “开发设置”中设置request合法域名,添加,添加https://apis.map.qq.com

    下面我们将刚才下载的微信小程序JavaScriptSDK v1.0引入到我们小程序内

    image.png

    接着在需要使用此功能的页面中 引入SDK核心类实例化API核心类

    // 引入SDK核心类
    var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
        key: '5BOBZ-3L5W6-WDJSR-ESAJ6********'//申请的开发者秘钥key
    });
    

    然后获取当前地理坐标并将其你解析为位置信息

    //小程序api获取当前坐标
    wx.getLocation({
                success: function(res) {
                    console.log(res)
                    
                    // 调用sdk接口
                    qqmapsdk.reverseGeocoder({
                        location: {
                            latitude: res.latitude,
                            longitude: res.longitude
                        },
                        success: function (res) {
                            //获取当前地址成功
                            console.log(res);
                        },
                        fail: function (res) {
                            console.log('获取当前地址失败');
                        }
                    });
                },
            })
    

    我们将返回值打印出来
    wx.getLocation返回值

    image.png

    reverseGeocoder返回值

    image.png

    已拿到具体位置

    更多腾讯地图提供的使用方法请查看https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html

    点赞.jpg

    相关文章

      网友评论

        本文标题:小程序根据坐标逆解析位置

        本文链接:https://www.haomeiwen.com/subject/yuywzftx.html