1、// map.js
Page({
data: {
latitude: 0, // 初始纬度值
longitude: 0, // 初始经度值
markers: \[\]
},
onReady: function (e) {
this.getLocation(); // 主动获取用户地理位置信息
},
getLocation: function () {
wx.getLocation({
type: 'gcj02',
success: (res) => {
this.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
id: 0,
latitude: res.latitude,
longitude: res.longitude,
title: '当前位置'
}]
});
this.mapCtx = wx.createMapContext('myMap');
this.mapCtx.moveToLocation(); // 移动地图到当前位置
},
fail: (error) => {
console.log('获取地理位置失败', error);
}
});
},
navigateTo: function () {
wx.openLocation({
latitude: this.data.latitude,
longitude: this.data.longitude,
name: '当前位置',
scale: 18
});
}
});
2、<!-- map.wxml -->
<view>
<map id="MyMap" style="width: 100%; height: 300px;"></map>
<button bindtap="navigateTo" type="primary">导航到目的地</button>
</view>
3、/* pages/map/map.wxss */
.page{
height: 100%;
}