微信位置

（uni-app）微信⼩程序之腾讯地图（定位当前位置，地图标点及导航）

话不多说，直接代码

⼀、dom

⼆、导航插件接⼊

2、引⼊插件包：路线规划appId：wx50b5593e81dd937a

在中添加，如图：

代码：

{

"plugins":{

"routePlan":{

"version":"1.0.12",

"provider":"wx50b5593e81dd937a"

}

},

"permission":{

"cation":{

"desc":"位置信息效果展⽰"

}

}

}

3、使⽤插件

注：在使⽤导航时需要⽤到腾讯位置服务中申请的key，申请步骤⾃⾏百度

markertap(e){

letplugin=requirePlugin('routePlan');

letkey='5ZKBZ-W3TCU-LSDVC-4XJLB-KQOYO-TVBQ6';//使⽤在腾讯位置服务申请的key

letreferer='test';//调⽤插件的app的名称

letnavigation=1//值为1时，开启驾车导航功能；默认不开启此功能

letendPoint=ify({//终点

'name':'奥林⽪克体育中⼼',

'latitude':32.00834,

'longitude':118.72495

});

teTo({

url:'plugin://routePlan/index?key='+key+'&referer='+referer+'&endPoint='+endPoint+'&navigation='+navigation

});

}

三、完整Script代码

exportdefault{

props:{

mapStyle:{

type:Object,

default:{

width:'100%',

height:'300rpx'

}

},

showCompass:{//是否显⽰指南针

type:Boolean,

default:fal

},

enableTraffic:{//是否开启实时路况

type:Boolean,

default:fal

},

showLocation:{//是否显⽰带有⽅向的当前定位点

type:Boolean,

default:true

},

},

data(){

return{

longitude:'118.72495',

latitude:'32.00834',

markers:[],

}

},

onReady(){

letvm=this

=MapContext('tencentMap',this)

ation()

},

methods:{

//初次位置授权

getAuthorize(){

returnnewPromi((resolve,reject)=>{

ize({

scope:"cation",

success:()=>{

resolve();//允许授权

},

fail:()=>{

reject();//拒绝授权

},

});

});

},

//确认授权后，获取⽤户位置

getLocationInfo(){

constthat=this;

ation({

type:"gcj02",

success:function(res){

ude=ude;

de=de;

s=[

{

id:2,

latitude:32.00834,

longitude:118.72495,

callout:{

callout:{

content:'奥林⽪克体育中⼼',

color:'#000',

fontSize:10,

bgColor:'#fff',

padding:5,

display:'ALWAYS',

textAlign:'center'

}

},

]

},

});

},

//拒绝授权后，弹框提⽰是否⼿动打开位置授权

openConfirm(){

returnnewPromi((resolve,reject)=>{

dal({

title:"请求授权当前位置",

content:"我们需要获取地理位置信息，为您推荐附近的商家",

success:(res)=>{

if(m){

tting().then((res)=>{

if(res[1].authSetting["cation"]===true){

resolve();//打开地图权限设置

}el{

reject();

}

});

}elif(){

reject();

}

},

});

});

},

//彻底拒绝位置获取

rejectGetLocation(){

ast({

title:"您拒绝了授权，⽆法获得周边信息",

icon:"none",

duration:2000,

});

},

//地图标点点击事件

markertap(e){

letplugin=requirePlugin('routePlan');

letkey='5ZKBZ-W3TCU-LSDVC-4XJLB-KQOYO-TVBQ6';//使⽤在腾讯位置服务申请的key

letreferer='test';//调⽤插件的app的名称

letnavigation=1//值为1时，开启驾车导航功能；默认不开启此功能

letendPoint=ify({//终点

'name':'奥林⽪克体育中⼼',

'latitude':32.00834,

'longitude':118.72495

});

teTo({

url:'plugin://routePlan/index?key='+key+'&referer='+referer+'&endPoint='+endPoint+'&navigation='+navigation

});

}

},

onReady(){

//wx请求获取位置权限

horize().then(()=>{

//同意后获取

ationInfo();

}).catch(()=>{

//不同意给出弹框，再次确认

nfirm().then(()=>{

ationInfo();

}).catch(()=>{

GetLocation();

});

});

},

}

四、效果图

总结

记录⼀下⼯作中的⽇常。在此期间借鉴了⼤佬的⽂章，由于时间有点久，找不到⽂章地址了，见谅！！如有侵权，请联系删除。

加油！奥⾥给