腾讯地图简单功能的封装

1、准备容器-css

 <div id="TMap"></div>

2、 props属性

 props: {

    disabledClicking: {

      type: Boolean,

      default: false

    },

    center: {

      type: Array,

      default() {

        return [28.661378, 121.428599]

      }

    },

    markerArr: {

      type: Array,

      default() {

        return []

      }

    }

  },

3、data数据

data() {

    return {

      map: null,

      markerLayer: null

    }

  },

4、 watch监听 

 watch: {

    markerArr: {

      handler(val) {

        if (val.length > 0) {

          this.map.setCenter(new TMap.LatLng(val[0].lat, val[0].lon))

          this.createMarker(this.formatMarkersData(val))

        } else {

          this.markerLayer.setMap(null)

        }

      },

      deep: true

    }

  },

5、 mounted 调用方法

 this.$nextTick(() => {

      this.initMap()

    })

 6、methods方法

methods: {

    // 初始化

    initMap() {

      this.map = new TMap.Map(document.getElementById('TMap'), {

        center: new TMap.LatLng(this.center[0], this.center[1]), // 设置地图中心点坐标

        zoom: 13, // 设置地图缩放级别

        viewMode: '2D'

      })

      if (this.markerArr.length) {

        this.createMarker(this.formatMarkersData(this.markerArr))

      }

      if (this.disabledClicking) return

      // 地图点击事件

      this.map.on('click', evt => {

        this.$emit('getLngLat', evt.latLng)

        this.markerArr[1] = {

          lat: evt.latLng.lat,

          lon: evt.latLng.lng

        }

        // 更新图层（打标）

        this.createMarker(

          this.formatMarkersData(this.markerArr)

        )

      })

    },

    // 回显点位

    createMarker(markers) {

      const that = this

      this.markerLayer && this.markerLayer.setMap(null)

      if (markers.length > 1) {

        this.map.setCenter(new TMap.LatLng(that.markerArr[1].lat, that.markerArr[1].lon))

      }

      this.markerLayer = new TMap.MultiMarker({

        id: 'marker-layer',

        map: this.map,

        styles: {

          markerStyle: new TMap.MarkerStyle({

            width: 35,

            height: 45,

            anchor: { x: 17, y: 32 },

            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'

          })

        },

        geometries: markers

      })

    },

    // 统一处理数据结构

    formatMarkersData(markers) {

      const arr = []

      markers.forEach((item, index) => {

        if (item.lon && item.lat) {

          arr.push({

            id: `marker${index}`,

            styleId: index === 0 ? 'myStyle' : 'markerStyle',

            position: new TMap.LatLng(item.lat, item.lon),

            properties: {

              title: `marker${index}`

            }

          })

        }

      })

      return arr

    }

  }

 7、容器样式-一定要给父容器一个高度

<style lang="scss" scoped>

  #TMap {

    width: 100%;

    height: 100%;

  }

</style>