【微信小程序】自定义marker并点击获得自定义信息

代码改自微信小程序官方文档markers代码片段

wxml

页面由地图，和下方自定义的信息框组成，地图中心点坐标及信息框信息都由current_info当前选中marker组成

<map 
  id="mapId"
  class="map"
  latitude="{{current_info.latitude}}"
  longitude="{{current_info.longitude}}"
  bindmarkertap="onMarkerTap"
></map>


<view class="infoCard">
 <image src="/img/handing/roomphoto.png"></image>
 <view class="fixed-right">
    <view class="fixed-name">{{current_info.roomName==null? "" : current_info.roomName}}</view>
    <view class="fixed-content">{{current_info.address==null? "" : current_info.address}}</view>
  </view>
  <view class="bottom-info">
    <view>开放时间：9:00 - 12:00; 14:00 - 17:00</view>
    <view>距您{{current_info.dis>=1000? (current_info.dis/1000) +'km' : current_info.dis+'m'}}</view>
  </view>
</view>

js

const app = getApp()
const img = '../../img/icon/marker.png'

Page({
  data: {
    latitude: null,
    longitude: null,
    markers: [],
    current_info: null,
    info: [],
    baseUrl: getApp().globalData.baseUrl,

  },

  //获取marker位置信息
  getMarkerInfo(latitude,longitude){//传入自身定位坐标，返回多个marker，内包含dis（与自己的距离）
    var that = this;
    wx.request({
      method: 'GET',
      header: {
        "Authorization": wx.getStorageSync('Authorization'),
      },
      url:  that.data.baseUrl+"/xxx",
      data: {
        lat: latitude,
        lon: longitude
      },
      success(response){
        that.info = response.data.result;
        console.log(response)
        that.setData({
          info:that.info
        });
        that.addMarkers();
    // 使用默认聚合效果时可注释下一句
        that.bindEvent();

      }
    })
  },

  onLoad: function () {
    //定位
    var that = this;
    wx.getLocation({//获取自身坐标
      type: 'wgs84',
      success (res) {
        that.setData({
          latitude: parseFloat(res.latitude),
          longitude: parseFloat(res.longitude)
        });
        that.getMarkerInfo(res.latitude, res.longitude);
      }
     }),
     
     
    this.mapCtx = wx.createMapContext('mapId')

    this.mapCtx.on('markerClusterClick', res =>{
      console.log('markerClusterClick', res)
    })

    // this.addMarkers();

    // // 使用默认聚合效果时可注释下一句
    // this.bindEvent();
  },

  bindEvent() {
    this.mapCtx.initMarkerCluster({
      enableDefaultStyle: false,
      zoomOnClick: true,
      gridSize: 60,
      complete(res) {
        console.log('initMarkerCluster', res)
      }
    })

    // enableDefaultStyle 为 true 时不会触发改事件
    this.mapCtx.on('markerClusterCreate', res => {
      console.log('clusterCreate', res)
      const clusters = res.clusters
      const markers = clusters.map(cluster => {
        const {
          center,
          clusterId,
          markerIds
        } = cluster
        return  {
          ...center,
          width: 0,
          height: 0,
          clusterId, // 必须
          label: {
            content: markerIds.length + '',
            fontSize: 20,
            width: 60,
            height: 60,
            bgColor: '#1C8CFE',
            borderRadius: 30,
            textAlign: 'center',
            anchorX: 0,
            anchorY: -30,
          }
        }
      })
      this.mapCtx.addMarkers({
        markers,
        clear: false,
        complete(res) {
          console.log('clusterCreate addMarkers', res)
        }
      })
    })
    
  },

  addMarkers() {
    const marker = {//可在此处自定义getMarkerInfo中获得的info中不存在却需要的属性名，因为后面会用到Object.assign将对象合并在一起
      iconPath: img,
      width: 40,
      height: 50,
      joinCluster: false, // 指定了该参数才会参与聚合
      latitude:null,
      longitude:null,
      roomId:null//房间id
    }
    const markers = []
    this.data.info.forEach((p, i, array) => {
      const a = {};
      const newMarker = Object.assign(a, marker, p); //小程序开发文档Object.assign(marker, p)因为浅拷贝的问题会出现markers数组内元素完全一样的现象，改成这样即可
      newMarker.latitude = parseFloat(newMarker.lat);
      newMarker.longitude = parseFloat(newMarker.lon);//可任意修改
      newMarker.roomId = newMarker.id;
      newMarker.id = i+1;//mark标记id
      //newMarker.label.content = `label ${i + 1}`
      markers.push(newMarker)//将newMarker push到markers中
    })
    this.mapCtx.addMarkers({//原小程序开发文档因为Object.assign的问题将这个方法写进了forEach中，现在可以拿到循环外
      markers,
      clear: false,
      complete(res) {
        console.log('addMarkers', res)
      }
    }),
      this.setData({
        markers: markers
      })
      this.setData({
        current_info: markers[0]
      });
      

  },
  // removeMarkers() {
  //   this.mapCtx.addMarkers({
  //     clear: true,
  //     markers: []
  //   })
  // },

  onMarkerTap(e) {
    this.setData({
      current_info: this.data.markers[e.detail.markerId-1]
    })
  },
})