效果展示

代码实现

1
2
3
4
5
6
7
8
9
10
<map
  longitude="{{currLoca.longitude}}" //地图界面中心的经度
  latitude="{{currLoca.latitude}}" //地图界面中心的纬度
  show-location="{{true}}"
  markers="{{markers}}" //标记点数据列表
  @markertap="markertap" //标记点点击事件
  scale="{{16}}" //默认缩放参数
  id="map"
  class="map">
</map>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const app = getApp()
const { getMarkers } = require('@/utils/api')
Page({
  data: {
    currLoca: {},
    markers: [],
  },
  init() {
    this.setData({
      currLoca: app.globalData.location,
    })
    wx.createMapContext('map').moveToLocation(this.data.currLoca)
    this.getMapMarkers()
  },
  async getMapMarkers() {
    wx.showLoading({
      title: '加载中',
    })
    let that = this
    let markarr = []
    const userInfo = app.globalData.userInfo
    let data = {
      phone: userInfo.phonenumber,
      userId: userInfo.userId,
      token: userInfo.token,
    }
    // 请求接口
    const res = await getMarkers(data)
    // 遍历数据,定义标记点
    res.forEach((it, index) => {
      // 自定义标记点
      let markObj = {
        id: index,
        latitude: it.lat,
        longitude: it.lng,
        iconPath: '../../images/box.png',
        width: '72rpx',
        height: '52rpx',
        // 这个zIndex一定要有,并且不能是一个固定值,否则会出现标记点和label,callout层级混乱
        zIndex: index + 1,
      }
      markarr.push(markObj)
    })
    this.setData({
      markers: markarr,
    })
    wx.hideLoading()
  },
  //标记点点击事件
  markertap(e) {
    console.log('=markertap=', e)
  },
  //地图放大缩小事件触发
  bindregionchange(e) {
    console.log('=bindregiοnchange=', e)
  },
  //点击地图事件，有经纬度信息返回
  bindtapMap(e) {
    console.log('=bindtapMap=', e)
  }
  onLoad(options) {
    this.init()
  },
})