1. 程式人生 > 其它 >Echarts地圖案例複製到本地vueCLI專案中除錯執行

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