mpvue

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

2018-10-22  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读