如何在vue-cli中引用百度地图开发API BMapLib？

之前在网上查的引用BMap类的方法是以下：

1、index.html 中引用

<script type="text/javascript" src="`http://api.map.baidu.com/api?v=2.0&ak=百度地图开发者平台申请的密钥`"></script>

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库，看源代码：

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

开头有
var BMapLib = window.BMapLib = BMapLib || {};
定义了命名空间，后面有
@exports DrawingManager as BMapLib.DrawingManager
把DrawingManager挂到BMapLib下了，所以这些lib库是按实际需要引入页面的。
所以要么再index里面整体引入，或者再需要的vue页面里面动态加载就可以了。

回答：

正解：
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()

以上是 如何在vue-cli中引用百度地图开发API BMapLib？ 的全部内容， 来源链接： utcz.com/a/150277.html

回到顶部