vue 腾讯地图 javaScriptAPI GL 多个markers自适应 （3）

前面两个笔记 是写的是 基本使用和 选点   当然 这些都是 一些很基础的使用  主要是为了 做一个笔记 以后好 copy
为某个东西选完点后  用户需要 看到每一个点的位置  那就需要 在地图上显示多个marker，为了用户体验 用户一眼就能 找到 每一个东西的大概位置   开撸

1、第一步 ：创建地图    为了用户体验 在用户没有选择看哪个东西时 默认定位到 ip 位置

mounted(){
  this.getMyLocation()
}

// 获取当前经纬度    之前 有记录过 
    getMyLocation() {
      const KEY = "腾讯地图的KEY";
      let url = "https://apis.map.qq.com/ws/location/v1/ip";
      this.$jsonp(url, {
        key: KEY,
        output: "jsonp"
      })
        .then(res => {
         // 记录下 当前位置的经纬度
          this.currentLocation = res.result.location;
          this.initMap();
        })
        .catch(error => {
          console.log(error);
        });
   }



// 地图的初始化
initMap() {
      // 地图初始化时的 center 就是 刚刚记录的经纬度
      var center = this.currentLocation;
      var container = document.getElementById("container");
      var map = new TMap.Map(container, {
        center: center, //设置地图中心坐标
        zoom: 17, //设置地图缩放级别
        pitch: 43.5, //设置俯仰角
        rotation: 45 //设置地图旋转角度
      });
      // 把map 对象 存起来，用于更新经纬度
      this.map = map;
  }

2、第二步： 创建marker、label方法   清楚所有marker、label方法      设置自适应显示marker

// 创建marker
    createMarker() {
      let markerArr = [
        {
          id: "marker1",
          styleId: "marker",
          position: new TMap.LatLng(39.954104, 116.457503),
          properties: {
            title: "marker1"
          }
        },
        {
          id: "marker2",
          styleId: "marker",
          position: new TMap.LatLng(39.794104, 116.287503),
          properties: {
            title: "marker2"
          }
        },
        {
          id: "marker3",
          styleId: "marker",
          position: new TMap.LatLng(39.984104, 116.307503),
          properties: {
            title: "marker3"
          }
        }
      ];
     // 注意这里是 this.marker  主要是为了 后面的清除
      this.marker = new TMap.MultiMarker({
        map: this.map,
        geometries: markerArr
      });
      this.selfAdaptionMarker(markerArr)
    },

 
   // 创建label
    createLabel() {
      let labelArr = [
        {
          id: "label1", //点图形数据的标志信息
          styleId: "label", //样式id
          position: new TMap.LatLng(39.954104, 116.457503), //标注点位置
          content: "xxx", //标注文本
          properties: {
            //标注点的属性数据
            title: "label"
          }
        },
        {
          id: "label2", //点图形数据的标志信息
          styleId: "label", //样式id
          position: new TMap.LatLng(39.794104, 116.287503), //标注点位置
          content: "sss", //标注文本
          properties: {
            //标注点的属性数据
            title: "label"
          }
        },
        {
          id: "label2", //点图形数据的标志信息
          styleId: "label", //样式id
          position: new TMap.LatLng(39.984104, 116.307503), //标注点位置
          content: "sss", //标注文本
          properties: {
            //标注点的属性数据
            title: "label"
          }
        }
      ];
// 注意这里是 this.label 主要是为了 后面的清除
      this.label = new TMap.MultiLabel({
        map: this.map,
        geometries: labelArr
      });
    },

   // 清除所有 marker 和 label
    clearMarkerAndLabel() {
      // 清除 marker
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      // 清除 label
      if (this.label) {
        this.label.setMap(null);
        this.label = null;
      }
    },

// 设置自适应显示marker
    selfAdaptionMarker(markersArr) {
      let bounds = new TMap.LatLngBounds();
      markersArr.forEach(item => {
        if (bounds.isEmpty() || !bounds.contains(item.position)) {
          bounds.extend(item.position);
        }
      });
      //   设置地图可是范围
      this.map.fitBounds(bounds, {
        padding: 100 //自适应边距
      });
    }

3、第三步： 需要谁  就调用第二步中的 方法

 

   

展示多个marker并自适应点击事件 和   清除所有marker 点击事件

//   展示多个marker并自适应
    showMarkers() {
      this.createMarker();
      this.createLabel();
    },

// 清除所有marker
    clearMarker() {
      this.clearMarkerAndLabel();
    },