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

来源：互联网发布：服务器端口开放工具编辑：程序博客网时间：2024/06/12 22:04

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" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>        <script src="./js/example6.js"></script>    </body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

var myChart = echarts.init(document.getElementById('main'));var option = {        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                    }          }]        }        },        series: [{            type: 'map',            mapType: 'china',            coordinateSystem: 'bmap'        }]    };myChart.setOption(option);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
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

其中series.map中，我们就可以直接把coordinateSystem设置为bmap了，引入成功了。

效果如下：
这里写图片描述

阅读全文

1 0