echarts 中使用百度地图 bmap （基础使用：仅显示、定义样式）

1. 实现功能实现简单的自定义样式百度地图，仅显示（基础，可自己研究扩展）效果：2. 代码步骤第一步：创建基础结构，id=“map” 的 div做 echarts 容器<!DOCTYPE html><html><head><title>Echarts - 百度地图</title><meta charset="utf-8">&l

-ACon-

10648人浏览 · 2020-08-11 11:05:29

-ACon- · 2020-08-11 11:05:29 发布

1. 实现功能

实现简单的自定义样式百度地图，仅显示（基础，可自己研究扩展）
效果：

2. 代码步骤

第一步：创建基础结构，id=“map” 的 div 做 echarts 容器

<!DOCTYPE html>
<html>
<head>
	<title>Echarts - 百度地图</title>
	<meta charset="utf-8">
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="map" style="height: 100%;"></div>
</body>
</html>

第二步：申请百度地图访问密钥（AK）

可参考文章：https://blog.csdn.net/qq_27512271/article/details/82994240
在代码中引用：

<!DOCTYPE html>
<html>
<head>
	<title>Echarts - 百度地图</title>
	<meta charset="utf-8">
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="map" style="height: 100%;"></div>
</body>
</html>
<script src="http://api.map.baidu.com/api?v=2.0&ak=申请到的AK值(记得替换为自己申请的AK)"></script>

第三步：引用 echarts.js 和 bmap.js

echarts.js 链接: https://pan.baidu.com/s/1w0wsFie-9BUdU_OrF86Zbw 提取码: 5bv5
bmap.js 链接: https://pan.baidu.com/s/1AXvpfevi-gTfYC74E0kgCg 提取码: igd6

放到合适的文件夹进行引用

<!DOCTYPE html>
<html>
<head>
	<title>Echarts - 百度地图</title>
	<meta charset="utf-8">
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="map" style="height: 100%;"></div>
</body>
</html>
<script src="http://api.map.baidu.com/api?v=2.0&ak=申请到的AK值(记得替换为自己申请的AK)"></script>
<script type="text/javascript" src="./js/echarts.js"></script>
<script type="text/javascript" src="./js/bmap.js"></script>

第四步：echarts绘制地图

<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('map'));

	myChart.setOption({
		bmap: {},
	});
</script>

此时已经可以看到一个最基础，未经配置的百度地图了，效果如下：

第五步： 自定义地图样式
1. 进入百度地图开放平台个性化地图界面：http://lbsyun.baidu.com/apiconsole/custommap

2. 点击【新建】按钮，进入下图界面

3. 可以直接选择模板样式，也可以自己定义样式，自定义样式点击左下角详细样式编辑器，可针对详细区域进行单独样式设置，如下图：

4. 编辑完成后，可在右侧拿到样式 JSON 数据

5. 复制 Json 数据到 JS 代码中，放到 bmap 对象下 mapStyle 对象下 styleJson

<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('map'));

	myChart.setOption({
		bmap: {
			mapStyle: {
				styleJson: [{
				    "featureType": "land",
				    "elementType": "geometry",
				    "stylers": {
				        "visibility": "on",
				        "color": "#091220ff"
				    }
				}]
			}
		},
	});
</script>