百度地图使用

export default {

  init: () => {
    return new Promise(function (resolve, reject) {
      const ak = "XXX";
      window.init = function () {
        resolve(BMap)
      }
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://api.map.baidu.com/api?v=3.0&ak=" + ak + "&callback=init";
      script.onerror = reject;
      document.head.appendChild(script);
    })
  },
  // 路线规划功能
  initTrackAnimation: () => {
    return new Promise(function (resolve, reject) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://mapopen.cdn.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js";
      script.onerror = reject;
      document.head.appendChild(script);
      resolve()
    })
  },

  // 路书
  initLushu: () => {
    return new Promise(function (resolve, reject) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "/LuShu_min.js";
      script.onerror = reject;
      document.head.appendChild(script);
      script.onload = () => {
        resolve()
      };

    })
  },
  /* BMapGL鼠标绘制功能 */
  loadBaiDuMap: () => {
    return new Promise(function (resolve, reject) {
      try {
        console.log('BMap is defined:', BMapGL === undefined || BMapGL)
        resolve(BMapGL)
      } catch (err) {
        window.init = function () {
          resolve(BMapGL)
        }
      }
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://mapopen.cdn.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js";
      script.onerror = reject;
      document.head.appendChild(script);
    })
  }

}


<div id="baidumap"></div>

 import BaiduMap from "@/utils/BaiduMap";
// BaiduMap.init().then((BMap) => {
 //   // console.log("地图初始化");
 //   map = new BMap.Map("home-map"); // 创建Map实例
 //   // 循环显示地图颜样式
 //   this.toggleMapTheme();
 //   // map.setMapStyle({ styleJson: eval(jylStyleJson) });
 //   // map.setMapStyleV2({
 //   //   styleId: jylStyleJson
 //   // })
 //   // 多个单位并且有选中 设置地图的级别
 //   if (this.hasTree && this.isLeaf) {
 //     if (this.points.length > 0) {
 //       map.centerAndZoom(
 //         new BMap.Point(this.points[0].lng, this.points[0].lat),
 //         14
 //       ); // 初始化地图,设置中心点坐标和地图级别
 //     } else {
 //       map.centerAndZoom("南京", 16); // 初始化地图,设置中心点坐标和地图级别
 //     }
 //   }
 //   //  多个单位并且没有选中 设置地图的级别
 //   else {
 //     if (this.points.length > 0) {
 //       map.centerAndZoom(
 //         new BMap.Point(this.points[0].lng, this.points[0].lat),
 //         15
 //       );
 //     } else {
 //       map.centerAndZoom("南京", 16);
 //     }
 //   }
 //   map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
 //   map.enableInertialDragging(true); //开启拖拽
 //   this.addMaker(this.points);
 // });
 
 
 
  methods: {


       initMap() {
         BaiduMap.init().then(BMap => {
           this.map = new BMap.Map("baidumap");
           this.map.centerAndZoom(new BMap.Point(this.lng, this.lat), 15); // 初始化地图,
           console.log("dd", this.latdata, this.lngdata);
           this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
           let id = this.currentId.id;
           getDevice(id).then(response => {
             this.loading = true;
             if (response.data.lng !== null || response.data.lat !== null) {
               var point = new BMap.Point(
                 Number(response.data.lng),
                 Number(response.data.lat)
               );
               var myIcon = new BMap.Icon(poinsImg, new BMap.Size(35, 45));
               // 创建标注
               var marker = new BMap.Marker(point, { icon: myIcon });
               // 将标注添加到地图中
               this.map.addOverlay(marker);
               //将地图中心移动到可视区中点
               this.map.panTo(point);
               var content = response.data.address;
               this.map.addOverlay(marker);
               this.map.panTo(point);
               var label = new BMap.Label(content, {
                 offset: new BMap.Size(-5, 45)
               });
               label.setStyle({
                 border: "1px solid #0000ffa1"
               });
               marker.setLabel(label);
               this.loading = false;
             } else {
               console.log(111);
             }
           });
         });
       }
     },
     mounted() {
       // this.getdata(this.currentId.id);
       this.initMap();
     }