(4) Copy the Echarts map case to the local vueCLI project to debug and run
Note: ① Use $.get to get related local variables, you need to use self instead of this. And you need to download and import JQuery dependencies.
② Baidu map download and ak introduction.
//under main.js file
1. import BaiduMap from ‘vue-baidu-map’
2. Vue.use(BaiduMap, {
ak:’your ak’
});
3. import * as echarts from “echarts” // The introduction method of echarts5.
4. Vue.prototype.$echarts = echorts
************************************************
//Specific case under .vue file
1. import ‘echarts/extension/bmap/bmap’ //Introduce Baidu Map
2. import { loadBMap } from ‘../map.js’ //Import map.js file
3. var $ = require(‘jquery’); //jquery import
************************************************
//Create a new map.js file in the same folder as the main.js file.
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
