先看下效果吧

首先進(jìn)行公眾號(hào)的常規(guī)開發(fā)，引入jssdk，相關(guān)配置代碼如下

引入后可以使用微信內(nèi)置定位功能，獲取用戶經(jīng)緯度

重點(diǎn)！引入騰訊地圖JS API 點(diǎn)擊查看騰訊javascript API

在index.html頁引入jsapi

(key需要自己去騰訊地圖官網(wǎng)申請(qǐng)奧，否則鑒權(quán)不通過，不能進(jìn)行接下來的開發(fā))

創(chuàng)建一個(gè)需要用的地圖的組件，設(shè)置地圖寬高

js相關(guān)代碼如下

  // 初始化地圖
    initMap() {
      this.mapSetting = {
        Map: qq.maps.Map, // 構(gòu)建map的集合
        Marker: qq.maps.Marker, // 地圖中的標(biāo)記
        LatLng: qq.maps.LatLng, // 地圖中的經(jīng)緯度
        Event: qq.maps.event, // 地圖事件
        MVCArray: qq.maps.MVCArray, // 地圖中的可變數(shù)組
        MarkerCluster: qq.maps.MarkerCluster // 地圖中點(diǎn)聚合(標(biāo)記聚合)
      }

      this.center = new this.mapSetting.LatLng(this.position.latitude, this.position.longitude)
      var options = {
        'zoom': 11,
        'center': this.center,
        'mapTypeId': 'roadmap'
      }

      // 創(chuàng)建map地圖
      this.map = new this.mapSetting.Map(document.getElementById('map'), options)
      // map的 info
      this.info = new qq.maps.InfoWindow({
        map: this.map
      })

      // 調(diào)用
      this.createCluster()
      this.initEvent()
    },
     // 地圖事件
    initEvent() {
      // 地圖縮放事件
      // info.open('zoomLevel: ' + map.getZoom())
      this.info.setPosition(this.center)
      this.mapSetting.Event.addListener(this.map, 'zoom_changed', () => {
        // todo 縮放時(shí) 分頁請(qǐng)求
        // const zoomLevel = map.getZoom()
        this.map.setCenter(this.center)
        // info.setContent('zoomLevel: ' + zoomLevel)
      })

      // 點(diǎn)擊點(diǎn)聚合clusterer(聚類器)
      this.mapSetting.Event.addListener(this.markerClusterer, 'clusterclick', function(evt) {
        // console.log('e', evt)
      })
    },
 	// 創(chuàng)建makers
    createCluster() {
      if (this.map == null) {
        return
      }
      var markers = new this.mapSetting.MVCArray()
      for (var i = 0; i < this.testData.length; i++) {
        const latLng = new this.mapSetting.LatLng(this.testData[i][0], this.testData[i][1])
        var marker = new this.mapSetting.Marker({
          'position': latLng,
          map: this.map
        })
        // 獲取標(biāo)記的點(diǎn)擊事件
        this.mapSetting.Event.addListener(marker, 'click', () => {
          this.showInfo = true
          this.info.open()
          this.info.setContent(this.divInfo)
          this.info.setPosition(latLng)
        })
        markers.push(marker)
      }

      this.markerClusterer = new this.mapSetting.MarkerCluster({
        map: this.map,
        minimumClusterSize: 8, // 默認(rèn)2
        markers: markers,
        zoomOnClick: true, // 默認(rèn)為true
        gridSize: 30, // 默認(rèn)60
        averageCenter: true, // 默認(rèn)false
        maxZoom: 18 // 默認(rèn)18
      })
    }

自定義標(biāo)記樣式

在createCluster方法中新增這段代碼就可以實(shí)現(xiàn)了

效果如下

好啦，主要代碼就是這些，快去試試吧，歡迎大家留言溝通