app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
wxml
<view>
<map id="map" longitude="{
{longitude}}" latitude="{
{latitude}}" scale="{
{scale}}" markers="{
{markers}}"
bindpoitap="markertap" show-location enable-poi show-compass enable-building style="width: 100%; height: 300px;">
</map>
</view>
<view>
<button type="primary" bindtap="location">定位</button>
</view>
js
Page({
/**
* 页面的初始数据
*/
data: {
scale:14,//缩放级别，取值范围为3-20
//当前定位位置
latitude: '',
longitude: '',
//标记点
markers:[{
id:"map",
latitude:'30.721657',
longitude:'103.996152',
iconPath:'../../image/location.png',
alpha:0.9,
width:'50rpx',
height:'50rpx'
}]
},
// 定位导航地址
location(){
wx.chooseLocation({
success:function(res){
console.log(res,"定位")
wx.openLocation({
latitude:res.latitude, //要去的纬度-地址
longitude:res.longitude, //要去的经度-地址
})
}
})
},
//获取当前位置
redirect(){
wx.getLocation({
type: 'gcj02',
success: (res) => {
console.log(res,"当前位置")
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
},
// 点击地图标记位置
markertap(e){
console.log(e,"点击")
if(e.detail.name){
// 开始标记
this.data.markers[0].latitude=e.detail.latitude;
this.data.markers[0].longitude=e.detail.longitude;
this.setData({
markers:this.data.markers
})
// 导航选定地址
wx.openLocation({
latitude:e.detail.latitude, //要去的纬度-地址
longitude:e.detail.longitude, //要去的经度-地址
})
}
},
onLoad() {
//获取当前位置
this.redirect()
}
})