vue + 微信公众号开发+腾讯地图定位显示附近商家多点标记并自定义标记样式

发表时间：2020-9-24

发布人：葵宇科技

浏览次数：175

先看下效果吧

在这里插入图片描述

首先进行公众号的常规开发，引入jssdk，相关配置代码如下

在这里插入图片描述

引入后可以使用微信内置定位功能，获取用户经纬度

在这里插入图片描述

重点！引入腾讯地图JS API 点击查看腾讯javascript API

在index.html页引入jsapi

(key需要自己去腾讯地图官网申请奥，否则鉴权不通过，不能进行接下来的开发)

在这里插入图片描述

创建一个需要用的地图的组件，设置地图宽高

在这里插入图片描述

js相关代码如下

  // 初始化地图
    initMap() {
      this.mapSetting = {
        Map: qq.maps.Map, // 构建map的集合
        Marker: qq.maps.Marker, // 地图中的标记
        LatLng: qq.maps.LatLng, // 地图中的经纬度
        Event: qq.maps.event, // 地图事件
        MVCArray: qq.maps.MVCArray, // 地图中的可变数组
        MarkerCluster: qq.maps.MarkerCluster // 地图中点聚合(标记聚合)
      }

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

      // 创建map地图
      this.map = new this.mapSetting.Map(document.getElementById('map'), options)
      // map的 info
      this.info = new qq.maps.InfoWindow({
        map: this.map
      })

      // 调用
      this.createCluster()
      this.initEvent()
    },
     // 地图事件
    initEvent() {
      // 地图缩放事件
      // info.open('zoomLevel: ' + map.getZoom())
      this.info.setPosition(this.center)
      this.mapSetting.Event.addListener(this.map, 'zoom_changed', () => {
        // todo 缩放时 分页请求
        // const zoomLevel = map.getZoom()
        this.map.setCenter(this.center)
        // info.setContent('zoomLevel: ' + zoomLevel)
      })

      // 点击点聚合clusterer(聚类器)
      this.mapSetting.Event.addListener(this.markerClusterer, 'clusterclick', function(evt) {
        // console.log('e', evt)
      })
    },
 	// 创建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
        })
        // 获取标记的点击事件
        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, // 默认2
        markers: markers,
        zoomOnClick: true, // 默认为true
        gridSize: 30, // 默认60
        averageCenter: true, // 默认false
        maxZoom: 18 // 默认18
      })
    }