vue使用騰訊地圖

1 vue cli 3.x 使用騰訊地圖

1. npm安裝騰訊地圖

騰訊官方並無在npm上發佈騰訊地圖插件，因此找到一個別人寫的，能夠直接調用騰訊地圖javascript方法
連接：https://www.npmjs.com/package/qqmap

npm install qqmap --save

在組件中引入

import maps from "qqmap"

data數據中

初始化地圖

此時你已經能夠在當前組件任何位置中使用騰訊地圖javascript方法

例如須要添加Marker

addMarkers(){
     var info = new qq.maps.InfoWindow({
      map: this.map
      });

      if(this.listener.length !=0){
          qq.maps.event.removeListener(this.listener);
      }
    
      var anchor = new qq.maps.Point(18, 49),
      size = new qq.maps.Size(38, 56),
      origin = new qq.maps.Point(0, 0),
      markerIcon = new qq.maps.MarkerImage(
        "https://img/dingwei.png",
        size,
        origin,
        anchor,
        
      );

      this.cars.forEach(e => {
        // 建立標記
        let marker = new qq.maps.Marker({
          position: new qq.maps.LatLng(e.latitude, e.longitude),
          icon:markerIcon,
          map: this.map
        });

       this.markersArray.push(marker);
        // marker.id = e.id;
        // marker.parkCarId = e.parkCarId;
        // marker.status = e.status;
        // 獲取標記點擊事件
        this.listener = qq.maps.event.addListener(marker, "click", () => {
          info.open(); //點擊標記打開提示窗
         info.setContent(
            '<div class="mapInfo"><p class="center">車編號:' +
              e.parkCarId +
              "</p><p>狀態:" +
              e.status +
              "</p><p>鎖編號:" +
              e.id +
              "</p><p>經度:" +
              e.latitude +
              "</p><p>緯度:" +
              e.longitude +
              "</p></div>"
          ); //***設置提示窗內容（這裏用到了marker對象中保存的數據）
          info.setPosition(new qq.maps.LatLng(e.latitude, e.longitude)); //提示窗位置
        });
      });
  
},
  //清除覆蓋層
clearOverlays() {
  if (this.markersArray) {
      for (let i in this.markersArray) {
          this.markersArray[i].setMap(null);
      }
      this.markersArray.length = 0;
  }
},

//顯示覆蓋層
showOverlays() {
    this.addMarkers();
    if (this.markersArray) {
        for (let i in this.markersArray) {
            this.markersArray[i].setMap(this.map);
        }
    }
},

---

註釋： markerIcon = new qq.maps.MarkerImage(

*"https://img/dingwei.png",*
        size,
        origin,
        anchor,
        
      );
      **可能會出現設置自定義圖片無效，你能夠在網絡上找一個圖片,用https地址，就能夠解決不顯示的問題。
      使用本地圖片，一直不顯示Marker,多是圖片放錯了位置，具體緣由還不清楚。**