2023年微信小程序API 地图·MapContext对象
作者: --时间: 2025-06-28 03:12:04
阅读量:
通过使用微信小程序API地图·MapContext对象,企业可以在自己的小程序中引入各种有用的地图功能。以下是MapContext提供的最重要的方法:
1. 获取当前地图的中心位置
使用getCenterLocation()
方法可以获取当前地图中心点的经纬度坐标。这个坐标可以直接在小程序中打开使用wx.openLocation()。
2. 将地图中心移置定位点
利用moveToLocation(Object object)
方法,将地图中心移至当前用户所在的位置。设置组件show-location
为true即可实现该功能。从小程序2.8.0开始,这个函数也支持将地图中心移动到指定的位置。
3. 平移Marker
利用translateMarker(Object object)
方法,可以平移标记,并带有动画效果。
4. 缩放显示所有的经纬度数据
用includePoints(Object object)
方法来缩放以展示所有经纬度信息。
5. 获取当前地图视野范围
getRegion()
方法用于获取当下地图的视野范围。
6. 获取当前地图旋转角度
getRotate()
方法用于获取当前地图的旋转角度。
7. 获取当前地图倾斜角度
getSkew()
方法用于获取当前地图的倾斜角度。
8. 获取当前地图缩放级别
getScale()
方法用于获取当前地图的缩放级别。
9. 设置地图中心点偏移量
setCenterOffset(Object object)
方法可以设置地图中心点的偏移量,按照向后和向下的方向来增大。默认情况下,坐标[0.5, 0.5]
表示屏幕的中央位置,可接受范围为(0.25~0.75)。
10. 移除自定义图层
removeCustomLayer(Object object)
方法用于在小程序地图中删除自定义图层。
11. 添加自定义图层
addCustomLayer(Object object)
方法用于在小程序地图中添加自定义图层。
<!-- map.wxml -->
<map id="myMap" show-location />
<button type="primary" bindtap="getCenterLocation">获取位置</button>
<button type="primary" bindtap="moveToLocation">移动位置</button>
<button type="primary" bindtap="translateMarker">移动标注</button>
<button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>
// map.js
Page({
onReady: function (e) {
// 使用 wx.createMapContext获取map上下文
this.mapCtx = wx.createMapContext('myMap')
},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function(res){
console.log(res.longitude)
console.log(res.latitude)
}
})
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
translateMarker: function() {
this.mapCtx.translateMarker({
markerId: 0,
autoRotate: true,
duration: 1000,
destination: {
latitude:23.10229,
longitude: