【百度 JavaScript API GL】安装

安装JavaScript API GL

需求

在vue项目中使用原生的百度JavaScript API GL。

技术点

官网地址：jspopularGL | 百度地图API SDK

开发文档：百度地图JSAPI WebGL v1.0类参考

引入方式安装

第一步：在public的index.html中引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&&type=webgl&ak=ak值"></script>

第二步：组件中使用

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.map = new BMapGL.Map("map");
    this.map.centerAndZoom(new BMapGL.Point(117.06 ,36.67), 17);
    this.map.enableScrollWheelZoom();
  },
}
</script>

<style lang="less">
#map {
  width: 300px;
  height: 300px;
  margin-top: 50px;
}
</style>

bmpgl.js 安装

在src文件夹目录下安装bmpgl.js。

export function BMPGL(ak) {
  return new Promise(function (resolve, reject) {
    try {
      resolve(BMapGL)
    } catch (err) {
      window.init = function () {
        // eslint-disable-next-line
        resolve(BMapGL)
      };
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `http://api.map.baidu.com/api?v=2.0&type=webgl&ak=${ak}&callback=init`;
      script.onerror = reject;
      document.head.appendChild(script);
    }
  });
}

在组件中使用

import { BMPGL } from '../map.js'

mounted() {
  this.$nextTick(() => {
    const that = this
    BMPGL(that.ak).then(BMapGL => {
      // ...
    })
  })
}