echarts 百度地图扩展使用

关注

原创最新推荐文章于 2026-03-25 22:02:04 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Echarts结合百度地图API绘制热力图最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图，在将其与百度地图结合的过程中遇到了一些问题，现将其过程与解决方案记录下，以供日后参考。echarts中结合百度地图API的热力图demo：http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX 使用步骤 1.引用echarts与百度地图扩展js文件 &lt;!--引入百度地... 阅读详情

最近在使用echarts地图时遇到诸多问题，现纪录如下：

项目基于 "@angular/cli": "~9.0.2" && "echarts": "^4.7.0"。

使用的官方示列，这个示列结合百度地图，在项目中引用echarts后，简单示列显示正常，之后想尝试复杂示列的显示，选择了这个地图，将官方数据拷贝过来后显示如下：

只有标题显示，地图不显示，在官方教程没有找到相关说明，之后百度找到 echarts结合百度地图使用--热力图这篇文章了解到是因为自己只做了 import * as echarts from 'echarts'; 缺少了 import 'echarts/extension/bmap/bmap';

急忙将 import 'echarts/extension/bmap/bmap'; 加上，保存刷新，报错了！！！

原来还有百度地图没有引入！！！

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=自己申请的密钥"></script>

在项目的 index.html 中加入这一行后地图终于显示出来了

和官方示列显示一模一样。。。

var option = {...}; // 此处省略
this.chart.setOption(option);
// 获取百度地图实例，使用百度地图自带的控件
var bmap = this.chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());

最后想说其实关于 echarts 中百度地图扩展使用的文档在 node_modules\echarts\extension\bmap 这个目录下有 readme.md！！！

参考链接：echarts结合百度地图使用--热力图

收录于