效果图:
查看微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html
其实不难,查看官方文档,一目了然
直接上代码:
map.wxml:
<button bindtap="mapViewTap" style="margin:10px">查看地图</button> <button bindtap="chooseMapViewTap" style="margin:10px">选择位置</button> <view> <view>纬度:{{location.latitude}}</view> <view>精度:{{location.longitude}}</view> <view>地址:{{location.address}}{{location.name}}</view> </view>map.js:
Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //利用getLocation获取当前位置的经纬度坐标 mapViewTap: function () { wx.getLocation({ type: 'gcj02', //返回可以用于wx.openLocation的经纬度 success: function (res) { console.log(res) wx.openLocation({ latitude: res.latitude, longitude: res.longitude, scale: 28 }) } }) }, //wx.chooseLocation(OBJECT) 打开地图选择位置 chooseMapViewTap:function(e){ var that=this; wx.chooseLocation({ success: function(res) { console.log(res); that.setData({ location:{ latitude:res.latitude, longitude: res.longitude, name:res.name, address:res.address } }) }, }) },})