微信小程序地圖實現(xiàn)點擊氣泡，展示callout，開發(fā)過程中遇到的需求，大致就和共享單車那個差不多，在很多個marker中點擊一個marker，顯示不同顏色的marker，沒有點擊的則展示正常狀態(tài)的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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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` // 轉(zhuǎn)換成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')
  }

最后，也不耽擱大家時間，還要去創(chuàng)建新項目啥的，那么我把代碼片單分享到這里，
（https://developers.weixin.qq.com/s/42Z8VYm87Jmt
）
直接在瀏覽器中打開這個就會跳轉(zhuǎn)到代碼片段里面看效果，我這里使用的加數(shù)據(jù)，來展示效果，實際使用的時候用后端返回的數(shù)據(jù)即可，
項目能正常運行，有不足之處，還請大神指點一二。

親，覺得可以點個贊呀