【百度 JavaScript API v3.0】安装

安装JavaScript API v3.0

需求

在vue项目中使用原生的百度JavaScript API v3.0。

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

引入方式安装

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

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

第二步：组件中使用

<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安装 

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

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)
  })
}

在组件中使用

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

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