1.首先我们要申请一个key
lbs.qq.com/dev/console…
在app.js里面
globalData: {
userInfo: null,
key:'上面所申请的key值'
}
然后在app.json里面进行如下配置(如果想要更详细的信息请查看官网 lbs.qq.com/miniProgram…
"permission":{
"scope.userLocation":{
"desc":"授权当前位置"
}
},
"plugins": {
"chooseLocation": {
"version": "1.0.5",
"provider": "wx76a9a06e5b4e693e"
}
2.下载qqmap-wx-jssdk.min.js
lbs.qq.com/miniProgram… 打开官网
然后,我们将qqmap-wx-jssdk.min.js放到utils文件夹中
好了。准备工作已做好。下面就由我们看一下代码怎么写吧
在index.wxml中
<view bindtap="getLocation">点击确定去选点导航</view>
在index.js中
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
var qqmapsdk;
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
latitude: 0,//地图初次加载时的纬度坐标
longitude: 0, //地图初次加载时的经度坐标
name: "" //选择的位置名称
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
moveToLocation: function () {
var that = this;
wx.chooseLocation({
// 点击确定选点之后返回的所进行如下操作
success: function (res) {
console.log(res)
wx.openLocation({//使用微信内置地图查看位置。
latitude: res.latitude,//要去的纬度-地址
longitude: res.longitude,//要去的经度-地址
name: res.name,
address: res.address
})
app.globalData.lat = res.latitude,
app.globalData.lng = res.longitude
},
fail: function (err) {
console.log(err)
}
});
},
getLocation:function(){
qqmapsdk = new QQMapWX({
key: app.globalData.key//腾讯地图的key
});
this.moveToLocation();
}
})
好了,大功告成!!!