腾讯地图常用覆盖物创建

E和弦的根音 · 2021-07-09 · 1669 次浏览

腾讯地图常用api封装,在这里做个记录,免得下次需要又去查文档

    /**
      * 初始化地图
      * @param {Object} options 
      * @return {void}
      */
          initMap(options) {
       let config = {
        rotation: 0, //设置地图旋转角度
                pitch:0, //设置俯仰角度(0~45)
                zoom:12, //设置地图缩放级别
                center: new TMap.LatLng(39.984104, 116.307503) //设置地图中心点坐标
       }
       config = Object.assign(config, options)
           this.map = new TMap.Map('container', config)

        },

    /**
      * 增加点标记
      * @param {Array} points 
      * @return {void}
      */
    createMarker(points) {
            if (!points.length) return
        points = points.map(item => new TMap.LatLng(item.lat, item.lng))
            this.markers = new TMap.MultiMarker({
                map: this.map,
                geometries: points.map(item => ({
                    position: item,
                })),
            })
            this.map.setCenter(points[0])
        }

    /**
      * 增加线覆盖物
      * @param {Array} points 
      * @return {void}
      */
    drowLine(points) {
        if (!points.length) return
        points = points.map(item => new TMap.LatLng(item.lat, item.lng))
            this.polylineLayer = new TMap.MultiPolyline({
                id: 'polyline-layer',
                map: this.map,
                geometries: [
                    {
                        paths: points,
                    },
                ],
            })
        },

    /**
      * 增加多边形覆盖物
      * @param {Array} points 
      * @return {void}
      */
    drowPloygon(paths) {
            if (paths.length < 3) return
        paths = paths.map(item => new TMap.LatLng(item.lat, item.lng))
            this.polygon = new TMap.MultiPolygon({
                map: this.map,
                geometries: [
                    {
                        paths,
                    },
                ],
            })
        },

    /**
      * 清除地图所有覆盖物
      * @return {void}
      */
    clearMap() {
            this.markers && this.markers.setMap(null)
            this.markers = null
            this.polylineLayer && this.polylineLayer.setMap(null)
            this.polylineLayer = null
            this.polygon && this.polygon.setMap(null)
            this.polygon = null
        },
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎评论,对作者也是一种鼓励。
查看评论 - 1 条评论