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()