【Baidu JavaScript API GL】インストール

JavaScript API GLをインストールする

必要

vue プロジェクトでネイティブ Baidu JavaScript API GL を使用します。

技術的なポイント

公式ウェブサイトのアドレス: jspopularGL | Baidu Map API SDK

開発ドキュメント: Baidu マップ JSAPI WebGL v1.0 クラス リファレンス

インポートされたインストール

ステップ 1: パブリックの Index.html に導入する

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

ステップ 2: コンポーネントで使用する

<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のインストール

bmpgl.js を src フォルダー ディレクトリにインストールします。

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 => {
      // ...
    })
  })
}