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();
    },