- 创建组件 - 目录、文件
- 地图组件结构 - 指定id和经纬度、中心点；绑定事件；其它略
<view class="map-wrap">
<map class="map" id="my-map" longitude="{{longitude}}" latitude="{{latitude}}" show-location />
<image class="center-img" src="/utils/center.png" mode="aspectFill" bind:tap="moveToLocation" />
</view>
- 地图组件逻辑 - 创建地图组件上下文变量，这里声明为页面全局变量，避免使用 this 引用
let mapCtx;
Component({})
- 地图组件逻辑的生命周期函数
lifetimes: {
attached: function () {
// 实例化地图组件上下文
mapCtx = wx.createMapContext('my-map', this)
// 获取当前位置
wx.getLocation({
type: 'gcj02',
success: res => {
this.setData({
longitude: res.longitude,
latitude: res.latitude
})
}
})
}
}
- 地图组件逻辑的数据 - 经纬度
longitude: '"",
latitude: ""
- 地图组件逻辑的方法 - 返回中心点方法
moveToLocation() {
mapCtx.moveToLocation({})
}
- 样式 - 略