微信小程序地图实现点击气泡，展示callout，开发过程中遇到的需求，大致就和共享单车那个差不多，在很多个marker中点击一个marker，显示不同颜色的marker，没有点击的则展示正常状态的marker，不bb了，直接上图看看：

image.png

image.png

上菜要分先后，那我先来html（wxml）

<view class="page-section-gap">
    <map id="myMap" 
        style="width: 100%; height: 100vh;"
        latitude="{{latitude}}" 
        longitude="{{longitude}}"
        markers="{{markers}}"
        controls="{{controls}}" 
        scale="{{scale}}" 
        bindmarkertap="bindmarkertap"
        bindcontroltap="controltap"
        bindcallouttap="clickCallout" 
        bindtap="clearMap" 
        polyline="{{polyline}}" 
        show-location
        show-scale show-compass>
    </map>
    <view class="contentBottomBox">
        <view class="location" bindtap="controltap">
            <image src="../../assets/Position.png" class="locationIcon"></image>
        </view>
    </view>
</view>

在上css（wxss）其实可以不上的，这样为了美观一点

.location {
  float: right;
  width: 80rpx;
  height: 80rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.1);
}

.contentBottomBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.locationIcon {
  width: 42rpx;
  height: 42rpx;
}

最后上大菜了

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mapKey: 'BURBZ-XE7K3-TS43N-YRIQT-XIMFS-72F4H',
    latitude: '',
    longitude: '',
    distance: '',
    distance: '',
    scale: 16,
    currMaker: {},
    markers: []
  },

  /**
   * 回到自己位置
   */
  controltap() {
    this.mapCtx.moveToLocation()
    this.getMyLocation()
    this.setData({
      scale: 17
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: _this.data.mapKey
    })
    this.getMyLocation()
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  // 获取我的位置
  getMyLocation: function () {
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        let arr = [{
          iconPath: '../../assets/location.png',
          width: 25,
          height: 25,
          address: '天府软件园A1号',
          latitude: 30.55060000,
          longitude: 104.07125900,
          id: 900000000,
          callout: {
            display: 'BYCLICK'
          }
        }, {
          iconPath: '../../assets/location.png',
          width: 25,
          height: 25,
          address: '天府软件园A3号',
          latitude: 30.53031088,
          longitude: 104.07234101,
          id: 900000001,
          callout: {
            display: 'BYCLICK'
          }
        }, {
          iconPath: '../../assets/location.png',
          width: 25,
          height: 25,
          address: '天府软件园A2号',
          latitude: 30.52031088,
          longitude: 104.05234101,
          id: 900000002,
          callout: {
            display: 'BYCLICK'
          }
        }]
        that.setData({
          markers: arr
        })
      }
    })
  },
  // marker的点击事件
  bindmarkertap(e) {
    console.log('e', e)
    let that = this
    let _markers = that.data.markers
    let markerId = parseInt(e.detail.markerId)
    wx.showLoading({
      title: `${markerId}`,
    })
    _markers.forEach(item => {
      console.log('item', item)
      if (parseInt(item.id) === markerId) {
        console.log('item', item)
        that.setData({
          currMaker: item
        })
      }
    })
    let currMaker = that.data.currMaker
    console.log('currMaker', that.data.currMaker)
    qqmapsdk.calculateDistance({
      to: [{
        latitude: currMaker.latitude,
        longitude: currMaker.longitude
      }],
      success: function (res) {
        let destinationDistance = res.result.elements[0].distance
        let distanceKm = `${(destinationDistance)}m` // 转换成m
        let arr = []
        for (let i = 0; i < _markers.length; i++) {
          if (parseInt(_markers[i].id) === markerId) {
            arr.push({
              address: _markers[i].address,
              latitude: _markers[i].latitude,
              longitude: _markers[i].longitude,
              id: _markers[i].id,
              width: 40,
              height: 40,
              iconPath: '../../assets/location_point.png',
              callout: {
                content: `距您${distanceKm}`,
                display: 'ALWAYS',
                color: '#333333',
                bgColor: '#fff',
                padding: 10,
                borderRadius: 10,
                borderColor: '#fff',
                fontSize: 16,
                borderWidth: 5,
                textAlign: 'center',
              },
            })
          } else {
            arr.push({
              address: _markers[i].address,
              latitude: _markers[i].latitude,
              longitude: _markers[i].longitude,
              id: _markers[i].id,
              width: 25,
              height: 25,
              iconPath: '../../assets/location.png',
              callout: {
                display: 'BYCLICK'
              }
            })
          }
        }
        that.setData({
          markers: arr
        })
        wx.hideLoading({
          success: (res) => {
            console.log(arr)
          },
        })
      }
    })
  }
})

大功告成，开饭
还有那个点击回到当前位置的，上面js里面有，添加一个点击事件

/**
   * 回到自己位置
   */
  controltap() {
    this.mapCtx.moveToLocation()
    this.getMyLocation()
    this.setData({
      scale: 17
    })
  },
  // 初始化的时候生成定义一下
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  }

最后，也不耽搁大家时间，还要去创建新项目啥的，那么我把代码片单分享到这里，
（https://developers.weixin.qq.com/s/42Z8VYm87Jmt
）
直接在浏览器中打开这个就会跳转到代码片段里面看效果，我这里使用的加数据，来展示效果，实际使用的时候用后端返回的数据即可，
项目能正常运行，有不足之处，还请大神指点一二。

亲，觉得可以点个赞呀