[Baidu JavaScript API v3.0] installation

Install JavaScript API v3.0

need

Use the native Baidu JavaScript API v3.0 in the vue project.

technical point

Official website address:  JavaScript API - Quick Start | Baidu Maps API SDK

Development document: Baidu map JSAPI 3.0 class reference

Imported installation

Step 1: Introduce in public index.html

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

The second step: use in the component

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

<script>

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

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

bmap.js installation 

Install bmpgl.js in the src folder directory.

export function MP(ak) {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(BMap)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

used in the component

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

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