vue中百度地图GL异步加载

原创已于 2022-08-16 17:46:42 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #百度 #javascript

于 2021-12-16 11:41:52 首次发布

本文介绍如何在Vue项目中实现百度地图GL 1.0版本的异步加载。通过创建loadBmap.js文件，将地图加载逻辑封装，然后在需要使用地图的页面按需引入，有效解决了资源加载问题。

百度地图GL 1.0版本
新建 loadBmap.js 文件，内容如下：

/**
 * @description 加载百度地图基础组件js
 */
export function asyncLoadBaiduJs () {
  return new Promise((resolve, reject) => {
    if (typeof BMapGL !== 'undefined') {
      resolve(BMapGL)
      return true
    }
    window.onBMapCallback = function () {
      resolve(BMapGL)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=  秘钥 &callback=onBMapCallback"
    script.onerror = reject
    document.head.appendChild(script)
  })
}

在需要使用的页面中

// dom元素，自设宽高
<div class="maps" style="width:800px;height:400px;" id="maps"></div>


<script>
import { asyncLoadBaiduJs } from "./loadBMap";
export default {
  name: "Contact",
  data() {
    return {
      mineMap: null,
    };
  },
  mounted() {
    this.loadMap();
  },
  methods: {
    // 加载百度地图
    async loadMap() {
      try {
        await asyncLoadBaiduJs();
        let lat = 0; // 经度
        let lon = 0; // 纬度
        let zoom = 16;
        // 设置地图
        this.initMap(lat, lon, zoom);
        // 添加marker点
        this.addMaker(lat, lon, e => {
          console.log('marker点击事件');
        });
        // 添加窗口
        this.addWindowInfo(lat, lon);
        // 调用窗口事件
      	this.addWindowClick("serve_1", e => console.log("serve_1事件"));

      } catch (error) {
        console.log(error);
      }
    },
    // 初始化地图
    initMap(lat, lon, zoom) {
      this.mineMap = new BMapGL.Map("maps"); // 实例化id为maps的元素
      this.mineMap.enableScrollWheelZoom(true); // 启用鼠标滚轮缩放
      this.mineMap.centerAndZoom(new BMapGL.Point(lat, lon), zoom); // 设置地图中心点 和 默认缩放等级
    },
    // 添加marker点
    addMaker(lat, lon, callBack) {},
    // 添加窗口信息
    addWindowInfo(lat, lon) {},
    // 为信息窗口里的元素添加事件
    addWindowClick(dom, callBack) {},
  }
};
</script>