Echarts地图案例复制到本地vueCLI项目中调试运行

（4）Echarts地图案例复制到本地vueCLI项目中调试运行

 

注：① 利用$.get获取相关的局变量，需使用self代替this。且需下载JQuery依赖并引入。

 

② 百度地图的下载与ak引入。

 

 

//在main.js文件下

 

1. import BaiduMap from 'vue-baidu-map'

2. Vue.use(BaiduMap, {

ak:'你的ak'

});

 

3. import * as echarts from "echarts" // echarts5的引入方式。

4. Vue.prototype.$echarts = echarts

 

**********************************************

 

//具体案例.vue文件下

 

1. import 'echarts/extension/bmap/bmap' //引入百度地图

2. import { loadBMap } from '../map.js' //引入map.js文件

3. var $ = require('jquery'); //jquery引入

 

***********************************************

//新建 map.js文件，与main.js文件处于同一文件夹。

 

export function loadBMap(ak) {

return new Promise(function(resolve, reject) {

if (typeof BMap !== 'undefined') {

resolve(BMap)

return true

}

window.onBMapCallback = function() {

resolve(BMap)

}

let script = document.createElement('script')

script.type = 'text/javascript'

script.src =

'http://api.map.baidu.com/api?v=2.0&ak='+ ak +'&__ec_v__=20190126&callback=onBMapCallback'

script.onerror = reject

document.head.appendC