可视化篇：Echarts3.0引入百度地图（更新）

最新推荐文章于 2024-06-17 18:02:18 发布

杨铖

最新推荐文章于 2024-06-17 18:02:18 发布

阅读量5.4w

点赞数 32

分类专栏：可视化文章标签：可视化 echarts 百度地图

本文链接：https://blog.csdn.net/yc_1993/article/details/52431989

版权

本文介绍如何在Echarts3.0中引入百度地图。首先需要申请百度地图的AK，然后下载并引入bmap.js扩展文件，最后设置echarts配置项中的coordinateSystem为'bmap'，结合AK实现地图展示。适用于Echarts3.8.4及以上版本。

摘要由CSDN通过智能技术生成

update:
由于目前echarts3.8.X比之前旧版改动较多，其实地图实例处许多朋友留言跑不通，今天更新下新版的做法，亲测已经可以。

perface
一直抽不开身，留言区以及不少朋友都在问如何在Echarts3.0里引入百度地图，由于之前写的是Echart2.0如何引入，但2.0目前已不再更新，所以这段时间断断续续研究了下，跟大家分享。
Echarts3.0采用标签引入，其相对而言比2.0的模块化引入更容易上手和配置。

update：
下面针对的是Echarts3.8.4（旧版的3.2.x以前版本不再支持该做法），其下载地址为：http://echarts.baidu.com/download.html，测试尽量选择源代码版本

1. 首先仍是百度AK的申请，请参考可视化篇：Echarts2.0引入百度地图中的指引，或者直接用博主的密钥也可以（PS：公司尽量自己申请同时增加配额）。

2. 下载bmap.js

update：

bmap.js 是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’
下载地址为：https://github.com/ecomfe/echarts ，GitHub上echarts源代码中路径为 dist/extension/bmap.min.js，旧版百度网盘版本不再支持该版本~~（ http://pan.baidu.com/s/1hrPEdGK ）~~

3. 引入echarts.js 、bmap.js 以及AK

update:
引入的同时为echarts也新建了个容器：

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                margin: 0;
            }
            #main {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script src="http://api.map.baidu.com/api?v=2.0&am

最低0.47元/天解锁文章

杨铖

关注

32
点赞
踩
47

收藏

觉得还不错? 一键收藏
81
评论
可视化篇：Echarts3.0引入百度地图（更新）

perface 由于一直抽不开身，留言区以及不少朋友都在问如何在Echarts3.0里引入百度地图，由于之前写的是Echart32.0如何引入，但2.0目前已不再更新，所以这段时间断断续续研究了下，跟大家分享。 Echarts3.0采用标签引入，其相对而言比2.0的模块化引入更容易上手和配置。下面针对的是Echarts3.2.3，其下载地址为：http://echarts.baidu.
复制链接

扫一扫