1、在index.wxml文件创建如下代码,longitude,latitude为以获取经纬度为地图中心,获取当前位置经纬度信息
<view>纬度:{{latitude}}</view>
<view>经度:{{longitude}}</view>
<button bindtap="mapViewTap" style="margin:10px">查看地图</button>
<button bindtap="chooseMapViewTap" style="margin:10px">选择位置</button>
2、index.js文件如下,onload 事件自动获取经纬度位置并且显示到页面,点击查看地图通过 wx.getLocation为获取用户位置API,也可以点击选择位置按钮选择自己当前位置
Page({
data: {
latitude: '',
longitude: ''
},
onLoad: function () {
var that = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
}
,// 查看地图
mapViewTap: function () {
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
console.log(res)
wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
scale: 28
})
}
})
},
// 选择位置
chooseMapViewTap: function () {
var that = this
wx.chooseLocation({
success: function (res) {
that.setData({
location: {
latitude: res.latitude,
longitude: res.longitude,
name: res.name
}
})
},
})
},
})
具体显示如下图: