ECharts 3与百度地图整合

最新推荐文章于 2019-12-05 09:23:37 发布

chibo2332

最新推荐文章于 2019-12-05 09:23:37 发布

阅读量60

点赞数

原文链接：https://my.oschina.net/ayyao/blog/868539

版权

来源：http://blog.csdn.net/yc_1993/article/details/52431989

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script th:src="@{/js/jquery.min.js}"></script>
<script src="../../static/js/echarts.min.js"
	th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=uHkkRqHOFj3Z6Ajv3lLhCD8WjYjb6rFM"></script>
<script src="../../static/js/bmap.min.js" th:src="@{/js/bmap.min.js}"></script>
<title>Test</title>
</head>
<body>
	<div class="ui onehalf wide padded" style="padding-top: 0.5em">
		<div class="ui tab active" data-tab="overview">
			<div class="ui two column grid"
				style="padding-top: 0px; margin-top: 0px; min-width: 400; min-height: 300px;">
				<div class="stretched row">
					<div class="column" style="padding-right: 1rem">
						<div class="ui segment">
							<span class="title">test3-需求分布图</span>
							<div class="ui divider"></div>
							<div id="echarts_chinaMap" class="chinaMap"
								style="width: 560px; height: 400px"></div>
						</div>
					</div>
				</div>
			</div>
			<script type="text/javascript">
				var myChart = echarts.init(document
						.getElementById('echarts_chinaMap'));

				var bmap = {
					center : [ 113.65, 34.76 ],
					zoom : 5,
					roam : true,
					mapStyle : {
						styleJson : [ {
							'featureType' : 'land', //调整土地颜色
							'elementType' : 'geometry',
							'stylers' : {
								'color' : '#081734'
							}
						}, {
							'featureType' : 'building', //调整建筑物颜色
							'elementType' : 'geometry',
							'stylers' : {
								'color' : '#04406F'
							}
						}, {
							'featureType' : 'building', //调整建筑物标签是否可视
							'elementType' : 'labels',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'highway', //调整高速道路颜色
							'elementType' : 'geometry',
							'stylers' : {
								'color' : '#015B99'
							}
						}, {
							'featureType' : 'highway', //调整高速名字是否可视
							'elementType' : 'labels',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'arterial', //调整一些干道颜色
							'elementType' : 'geometry',
							'stylers' : {
								'color' : '#003051'
							}
						}, {
							'featureType' : 'arterial',
							'elementType' : 'labels',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'green',
							'elementType' : 'geometry',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'water',
							'elementType' : 'geometry',
							'stylers' : {
								'color' : '#044161'
							}
						}, {
							'featureType' : 'subway', //调整地铁颜色
							'elementType' : 'geometry.stroke',
							'stylers' : {
								'color' : '#003051'
							}
						}, {
							'featureType' : 'subway',
							'elementType' : 'labels',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'railway',
							'elementType' : 'geometry',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'railway',
							'elementType' : 'labels',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'all', //调整所有的标签的边缘颜色
							'elementType' : 'labels.text.stroke',
							'stylers' : {
								'color' : '#313131'
							}
						}, {
							'featureType' : 'all', //调整所有标签的填充颜色
							'elementType' : 'labels.text.fill',
							'stylers' : {
								'color' : '#FFFFFF'
							}
						}, {
							'featureType' : 'manmade',
							'elementType' : 'geometry',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'manmade',
							'elementType' : 'labels',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'local',
							'elementType' : 'geometry',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'local',
							'elementType' : 'labels',
							'stylers' : {
								'visibility' : 'off'
							}
						}, {
							'featureType' : 'subway',
							'elementType' : 'geometry',
							'stylers' : {
								'lightness' : -65
							}
						}, {
							'featureType' : 'railway',
							'elementType' : 'all',
							'stylers' : {
								'lightness' : -40
							}
						}, {
							'featureType' : 'boundary',
							'elementType' : 'geometry',
							'stylers' : {
								'color' : '#8b8787',
								'weight' : '1',
								'lightness' : -29
							}
						} ]
					}
				};
				var series = [ {
					type : 'map',
					mapType : 'china',
					coordinateSystem : 'bmap'
				} ];
				var option = {
					bmap : bmap,
					series : series
				};
				myChart.setOption(option);
			</script>
		</div>
	</div>
</body>
</html>

在这个博客里已经有详细的代码和说明，下面说一下在实际应用中要注意的问题：

1.要先引入echarts.js，然后再引入bmap.min.js和AK（这两个没有顺序要求，已经测试）。

2.引入script的地方可以放到head里面。

3.ApiKey可以是自己获取的，也可以使用别人的，这个没有要求。

----------

如果你没有bmap.min.js脚本，可以从这个地方获取（http://gallery.echartsjs.com/dep/echarts/latest/extension/bmap.min.js）不只这一个地方可以获取哟！

转载于:https://my.oschina.net/ayyao/blog/868539

chibo2332

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts 3与百度地图整合

来源：http://blog.csdn.net/yc_1993/article/details/52431989 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www...
复制链接

扫一扫