前面兩個筆記 是寫的是 基本使用和 選點 當然 這些都是 一些很基礎的使用 主要是為了 做一個筆記 以后好 copy
為某個東西選完點后 用戶需要 看到每一個點的位置 那就需要 在地圖上顯示多個marker，為了用戶體驗 用戶一眼就能 找到 每一個東西的大概位置 開擼

1、第一步 ：創(chuàng)建地圖 為了用戶體驗 在用戶沒有選擇看哪個東西時 默認定位到 ip 位置

mounted(){
  this.getMyLocation()
}

// 獲取當前經(jīng)緯度    之前 有記錄過 
    getMyLocation() {
      const KEY = "騰訊地圖的KEY";
      let url = "https://apis.map.qq.com/ws/location/v1/ip";
      this.$jsonp(url, {
        key: KEY,
        output: "jsonp"
      })
        .then(res => {
         // 記錄下 當前位置的經(jīng)緯度
          this.currentLocation = res.result.location;
          this.initMap();
        })
        .catch(error => {
          console.log(error);
        });
   }



// 地圖的初始化
initMap() {
      // 地圖初始化時的 center 就是 剛剛記錄的經(jīng)緯度
      var center = this.currentLocation;
      var container = document.getElementById("container");
      var map = new TMap.Map(container, {
        center: center, //設置地圖中心坐標
        zoom: 17, //設置地圖縮放級別
        pitch: 43.5, //設置俯仰角
        rotation: 45 //設置地圖旋轉(zhuǎn)角度
      });
      // 把map 對象 存起來，用于更新經(jīng)緯度
      this.map = map;
  }

2、第二步： 創(chuàng)建marker、label方法 清楚所有marker、label方法 設置自適應顯示marker

// 創(chuàng)建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)
    },

 
   // 創(chuàng)建label
    createLabel() {
      let labelArr = [
        {
          id: "label1", //點圖形數(shù)據(jù)的標志信息
          styleId: "label", //樣式id
          position: new TMap.LatLng(39.954104, 116.457503), //標注點位置
          content: "xxx", //標注文本
          properties: {
            //標注點的屬性數(shù)據(jù)
            title: "label"
          }
        },
        {
          id: "label2", //點圖形數(shù)據(jù)的標志信息
          styleId: "label", //樣式id
          position: new TMap.LatLng(39.794104, 116.287503), //標注點位置
          content: "sss", //標注文本
          properties: {
            //標注點的屬性數(shù)據(jù)
            title: "label"
          }
        },
        {
          id: "label2", //點圖形數(shù)據(jù)的標志信息
          styleId: "label", //樣式id
          position: new TMap.LatLng(39.984104, 116.307503), //標注點位置
          content: "sss", //標注文本
          properties: {
            //標注點的屬性數(shù)據(jù)
            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、第三步： 需要誰 就調(diào)用第二步中的 方法

展示多個marker并自適應點擊事件 和 清除所有marker 點擊事件

//   展示多個marker并自適應
    showMarkers() {
      this.createMarker();
      this.createLabel();
    },

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

總結(jié)

以上是生活随笔為你收集整理的vue 腾讯地图 javaScriptAPI GL 多个markers自适应 （3）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。