一. 获取key
登录腾讯位置服务, 进入控制台, 创建应用, 添加Key
二. 引入插件包:
//manifest.json "mp-weixin":{}
"plugins" : {
"chooseLocation" : {
"version" : "1.0.6",
"provider" : "wx76a9a06e5b4e693e"
}
}
三.设置定位授权
//manifest.json
"permission" : {
"scope.userLocation" : {
"desc" : "你的位置信息将用于小程序位置判断远近的显示。"
}
},
四.获取当前位置
let that = this
wx.getLocation({
type:'gcj02',
isHighAccuracy:true,
success:function(res){
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
that.longitude = res.longitude
that.latitude = res.latitude
}
})
五.使用地图选点
//pages/map/map
const chooseLocation = requirePlugin('chooseLocation');
export default {
props:{
latitude:{
type:String,
},
longitude:{
type:String,
}
},
data() {
return {
location:null
};
},
onLoad(options) {
},
onShow() {
this.initRoutePlan()
this.location = chooseLocation.getLocation();
console.log(this.location)
uni.$emit('map',this.location)
},
onUnload () {
// 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果
chooseLocation.setLocation(null);
},
watch:{
location(){
uni.navigateBack({
delta:2
})
}
},
methods: {
initRoutePlan() {
const key = 'NGLBZ-7AVCF-3BYJD-NXUZ6-TKBOQ-KSFBQ'; //使用在腾讯位置服务申请的key
const referer = 'dwkw'; //调用插件的app的名称
let that = this
const location = JSON.stringify({
latitude: that.latitude,
longitude: that.longitude
});
const category = '';
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
});
}
}
}
六. 地图显示
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
export default {
name:"card-map",
props:{
longitude:{
type:String,
default:''
},
latitude:{
type:String,
default:''
}
},
data() {
return {
covers:[{
longitude:'',
latitude:'',
iconPath:'/static/location.png'
}]
};
},
mounted() {
this.covers[0].longitude = this.longitude
this.covers[0].latitude = this.latitude
console.log(this.covers)
}
}