Echarts3.0引入百度地图

80 阅读 0 评论 53 点赞

我是靠谱客的博主暴躁外套，这篇文章主要介绍Echarts3.0引入百度地图，现在分享给大家，希望可以做个参考。

最新项目需要引用echarts里面的一个地图例子，按照官网引入之前是报错series.custom不存在，找了半天是因为我们项目中的echarts不是最新的，只有3.6.0以上的才支持custom，后来引入了最新的之后，会报错api.coord is undefined。这个原因就找了很有一段时间了，全是按照官网引用的啊，咋会报这错呢，后来也是在网上找到的，因为没有下载bmap.js ,bmap.js是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’,

下载地址为：https://github.com/ecomfe/echarts ，GitHub上echarts源代码中路径为 dist/extension/bmap.min.js，下好了直接在引入echarts之后引用就行了，由于echarts3的地图是以百度地图为底图的形式，所以在这之前还需要引入百度地图的。那么echart3 引入百度地图的具体步骤就是：

1、首先仍是百度AK的申请（PS：公司尽量自己申请同时增加配额）。

2、下载bmap.js

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

参考代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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&ak=你的密钥"></script>
<script src="./echarts/echarts.js"></script>
<script src="./js/bmap.min.js"></script>
<script src="./js/example.js"></script>
</body>
</html>

其中example.js为echarts测试样例，如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
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
}
}]
}
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
data: [ [120, 30, 1] ]
}]
});
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());