微信小程序的组件中,存在map这个组件,可以完成一些定位的功能
如图:
点击定位按钮,会显示出你当前所在的位置,可以通过手指头进行缩放
代码如下:
wxml结构
<button type="primary" bindtap="getLoca">定位</button>
<map style="width: 100%;height: 700rpx;" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
js文件代码
data: {
longitude: '',
latitude: '',
markers: [{
id: 0,
height: 50,
width: 40,
longitude: '',
latitude: ''
}]
},
getLoca() {
wx.getLocation().then(res => {
console.log(res);
this.setData({
longitude: res.longitude,
latitude: res.latitude,
markers: [{
id: 0,
height: 50,
width: 50,
longitude: res.longitude,
latitude: res.latitude
}]
})
})
},
注意:
app.json文件中,也要进行配置
"permission": {
"scope.userLocation": {
"desc": "请求获取地理信息"
}
},