bmaplib vue 調用_【Vue】如何在vue-cli中引用百度地圖開發API BMapLib？

之前在網上查的引用BMap類的方法是以下：

1、index.html 中引用

2、webpack.base.config.js中

externals: {

"BMap": "BMap"

}

3、最後在元件中

import BMap from ‘BMap’ 就可以了

問題：

我一開始以為引入了http://api.map.baidu.com/api?v=2.0&ak=百度地圖開發者平台申請的密鑰包括了BMapLib類，我隻需在webpack.base.config.js的externals中加上BMapLib，并且在元件中引入即可。但是我看了官網的一個demo，http://lbsyun.baidu.com/jsdem…

如果包括了BMapLib類，那其實就不必再引入DrawingManager了，對吧？是以，如何在vue-cli中引用BMapLib類？？？

回答

百度地圖的BMapLib是基礎類，另外還提供了多個lib庫，快速實作在地圖上添加Marker、自定義資訊視窗、标注相關開發、滑鼠繪制工具等功能。每個功能對應的庫需要你自己按需單獨引用進來。

比如這個DrawingManager庫，看源代碼：

開頭有

var BMapLib = window.BMapLib = BMapLib || {};

定義了命名空間，後面有

@exports DrawingManager as BMapLib.DrawingManager

把DrawingManager挂到BMapLib下了，是以這些lib庫是按實際需要引入頁面的。

是以要麼再index裡面整體引入，或者再需要的vue頁面裡面動态加載就可以了。

正解：

1、index.html

// 以DrawingManager為例

2、webpack.base.config.js中

externals: {

"BMapLib": "BMapLib"

}

3、最後在元件中

import BMapLib from 'BMapLib'

// 使用DrawingManager

new BMapLib.DrawingManager()