鍍金池/ 問答/HTML/ 如何在vue-cli中引用百度地圖開發(fā)API BMapLib？

如何在vue-cli中引用百度地圖開發(fā)API BMapLib？

之前在網(wǎng)上查的引用BMap類的方法是以下：

1、index.html 中引用

<script type="text/javascript" src="`http://api.map.baidu.com/api?v=2.0&ak=百度地圖開發(fā)者平臺申請的密鑰`"></script>

2、webpack.base.config.js中

externals: {
  "BMap": "BMap"
}

3、最后在組件中
import BMap from 'BMap' 就可以了

問題：
我一開始以為引入了http://api.map.baidu.com/api?v=2.0&ak=百度地圖開發(fā)者平臺申請的密鑰包括了BMapLib類，我只需在webpack.base.config.js的externals中加上BMapLib，并且在組件中引入即可。但是我看了官網(wǎng)的一個demo，http://lbsyun.baidu.com/jsdem...
圖片描述

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

回答
編輯回答
命多硬

正解：
1、index.html

// 以DrawingManager為例
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

2、webpack.base.config.js中

externals: {
  "BMapLib": "BMapLib"
}

3、最后在組件中

import BMapLib from 'BMapLib'
// 使用DrawingManager
new BMapLib.DrawingManager()
2018年1月4日 19:36
編輯回答
孤島

百度地圖的BMapLib是基礎(chǔ)類，另外還提供了多個lib庫，快速實現(xiàn)在地圖上添加Marker、自定義信息窗口、標注相關(guān)開發(fā)、鼠標繪制工具等功能。每個功能對應(yīng)的庫需要你自己按需單獨引用進來。

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

http://api.map.baidu.com/libr...

開頭有
var BMapLib = window.BMapLib = BMapLib || {};
定義了命名空間，后面有
@exports DrawingManager as BMapLib.DrawingManager
把DrawingManager掛到BMapLib下了，所以這些lib庫是按實際需要引入頁面的。
所以要么再index里面整體引入，或者再需要的vue頁面里面動態(tài)加載就可以了。

2018年1月20日 11:09