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

1、第一步 ：創(chuàng)建地圖 為了用戶體驗(yàn) 在用戶沒(méi)有選擇看哪個(gè)東西時(shí) 默認(rèn)定位到 ip 位置

mounted(){
  this.getMyLocation()
}

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



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

2、第二步： 創(chuàng)建marker、label方法 清楚所有marker、label方法 設(shè)置自適應(yīng)顯示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", //點(diǎn)圖形數(shù)據(jù)的標(biāo)志信息
          styleId: "label", //樣式id
          position: new TMap.LatLng(39.954104, 116.457503), //標(biāo)注點(diǎn)位置
          content: "xxx", //標(biāo)注文本
          properties: {
            //標(biāo)注點(diǎn)的屬性數(shù)據(jù)
            title: "label"
          }
        },
        {
          id: "label2", //點(diǎn)圖形數(shù)據(jù)的標(biāo)志信息
          styleId: "label", //樣式id
          position: new TMap.LatLng(39.794104, 116.287503), //標(biāo)注點(diǎn)位置
          content: "sss", //標(biāo)注文本
          properties: {
            //標(biāo)注點(diǎn)的屬性數(shù)據(jù)
            title: "label"
          }
        },
        {
          id: "label2", //點(diǎn)圖形數(shù)據(jù)的標(biāo)志信息
          styleId: "label", //樣式id
          position: new TMap.LatLng(39.984104, 116.307503), //標(biāo)注點(diǎn)位置
          content: "sss", //標(biāo)注文本
          properties: {
            //標(biāo)注點(diǎn)的屬性數(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;
      }
    },

// 設(shè)置自適應(yīng)顯示marker
    selfAdaptionMarker(markersArr) {
      let bounds = new TMap.LatLngBounds();
      markersArr.forEach(item => {
        if (bounds.isEmpty() || !bounds.contains(item.position)) {
          bounds.extend(item.position);
        }
      });
      //   設(shè)置地圖可是范圍
      this.map.fitBounds(bounds, {
        padding: 100 //自適應(yīng)邊距
      });
    }

3、第三步： 需要誰(shuí) 就調(diào)用第二步中的 方法

展示多個(gè)marker并自適應(yīng)點(diǎn)擊事件 和 清除所有marker 點(diǎn)擊事件

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

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

總結(jié)

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

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