Echarts3.0引入百度地图-简单说

最新推荐文章于 2026-04-25 09:04:00 发布

原创

最新推荐文章于 2026-04-25 09:04:00 发布 · 1.9w 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍如何在ECharts 3.0中集成百度地图，包括申请百度AK、下载并配置必要的JS文件、自定义地图样式等步骤。

1. 首先是百度AK的申请

2. 下载bmap.js echarts.js

bmap.js 是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’
下载地址为：https://pan.baidu.com/s/1o8MB98I

下面针对的是Echarts3.0 下载地址为：http://echarts.baidu.com/download.html，开发测试选择源代码版本

3. 引入echarts.js 、bmap.js

引入的同时为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="./echarts/echarts.js"></script>
        <script src="./js/bmap.js"></script>
        <script type="text/javascript"