使用Echarts实现省市区的地图，今天有时间写个北京地图demo。先看下效果图：
1、首先先引入echarts.min.js文件，然后改造下beijing.json文件，改造后把json改成js文件。各省的json文件大家可以在网上搜下，如果要先成的文件可以给我留下邮箱，我发给大家。
<div id="main" style="height:900px;"></div>
<script type="text/JavaScript" src="js/echarts.min.js"></script>
<script type="text/JavaScript" src="js/beijing.js"></script>
2、相关的文件都引入后，就可以构建地图了。 下面是简单的demo代码，
echarts.registerMap('beijing', beijingJson);//这里用的那个省市的就写那个省市的名字
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
title:{ //这里是标题
text: '北京市轮廓地图',
top: '3%',
left: 'center',//标题居中显示
textStyle: {//标题的样式
fontSize: 20,
fontWeight: 600,
color: '#222'
}
},
tooltip: {
trigger: 'item',
formatter: function (val) {//这里是鼠标滑过显示的弹框，弹框可以根据自己的需求去写
return val.data.name + '<div class="bjMap">'
+ '<h2><img src="' + val.data.url + '"></h2>'
+ '<p>' + val.data.value + '</p>'
+ '</div>'
}
},
series: [{
type: 'map',
map: 'beijing',
roam: true,//是否开启鼠标缩放和平移漫游
geoIndex: 0,// 不可缺少，否则无tooltip 指示效果
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#fff"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#0550c3',//区域边框颜色
areaColor:"#17a34f",//区域颜色
},
emphasis: {
borderWidth: .95,//鼠标滑过区域，区域边框宽度
borderColor: '#fff',//鼠标滑过区域，区域边框颜色
areaColor:"#ff6511",//鼠标滑过区域背景色
}
},
data: [//这里是数据
{
name: '延庆区',
url:'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',
value: '好邻居！可玩的地儿多的数不过来！',
lng: 115.981186,
lat: 40.462706
},
{
name: '怀柔区',
url:'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
value: '好邻居！可玩的地儿多的数不过来！',
lng: 116.63853,
lat: 40.322563
},
{
name: '密云区',
url:'https://pic4.zhimg.com/50/v2-270ccddee1da949f5a951da1220b373a_hd.jpg',
value: '好邻居！可玩的地儿多的数不过来！',
lng: 116.849551,
lat: 40.382999
},
{
name: '昌平区',
url:'https://pic2.zhimg.com/50/v2-ec095df48d0362d3eb4d0525d4394e16_hd.jpg',
value: '立水桥、回龙观、西三旗、明朝十三陵',
lng: 116.237832,
lat: 40.226854
},
{
name: '顺义区',
url:'https://pic4.zhimg.com/50/v2-4eab4a0caf6b0382c115005992bd6de0_hd.jpg',
value: '顺义城关、天竺、南法信、高丽营',
lng: 116.663242,
lat: 40.1362
},
{
name: '平谷区',
url:'https://pic3.zhimg.com/50/v2-273aed32f94cceb43f03fa389265d8d7_hd.jpg',
value: '平谷镇，金海湖镇，京东大溶洞',
lng: 117.128025,
lat: 40.147115
},
{
name: '门头沟区',
url:'https://pic2.zhimg.com/50/v2-8492e1436403ff4b1305ee031b2b7e94_hd.jpg',
value: '百花山、妙峰山、潭柘寺、戒台寺、永定河',
lng: 116.108179,
lat: 39.94648
},
{
name: '海淀区',
url:'https://pic2.zhimg.com/50/v2-0a43a0d541eb2ff159c69122f2c1f154_hd.jpg',
value: '中关村、五道口、公主坟、颐和园',
lng: 116.304872,
lat: 39.96553
},
{
name: '石景山区',
url:'https://pic3.zhimg.com/80/v2-48a9b57c60e2f15c818c02b879420b73_720w.jpg',
value: '苹果园、老古城、衙门口、玉泉路',
lng: 116.229612,
lat: 39.912017
},
{
name: '西城区',
url:'https://pic3.zhimg.com/v2-00aac6ebd1fe7abb4f2dbc287152bbb5_r.jpg',
value: '西单、什刹海、西直门、动物园',
lng: 116.372397,
lat: 39.918561
},
{
name: '东城区',
url:'https://pic2.zhimg.com/50/v2-f3ba9dcfdbf8ee9a16827be4ee63d62c_hd.jpg',
value: '天安门、王府井、钟鼓楼、东内大街',
lng: 116.42272,
lat: 39.934579
},
{
name: '朝阳区',
url:'https://pic2.zhimg.com/50/v2-d8f9da83aa06b7f6982918272befe909_hd.jpg',
value: '朝外大街、大北窑、亚运村、三里屯',
lng: 116.449767,
lat: 39.927254
},
{
name: '通州区',
url:'https://pic3.zhimg.com/50/v2-6234a8e355289891af36a7bc15186976_hd.jpg',
value: '新华大街、北苑、管庄、八里桥',
lng: 116.662928,
lat: 39.917001
},
{
name: '大兴区',
url:'https://pic2.zhimg.com/50/v2-05ae0a59a3ab00eb5debdf5cece23cd3_hd.jpg',
value: '黄村镇、西红门、亦庄、庞各庄',
lng: 116.348053,
lat: 39.732833
},
{
name: '房山区',
url:'https://pic2.zhimg.com/50/v2-4aa9534e0a120c7e4778e75ab07f2644_hd.jpg',
value: '良乡、燕山、十渡、周口店',
lng: 116.149892,
lat: 39.755039
},
{
name: '丰台区',
url:'https://pic4.zhimg.com/50/v2-425af7e363e02c9a16b9b49fa2f9d395_hd.jpg',
value: '丰台镇、方庄、大红门、卢沟桥',
lng: 116.293105,
lat: 39.865042
}
]
}],
});
如果大家有需要要源码的话可以在git上下载：（第一次写的地图，不喜勿喷，欢迎大家点赞！） gitee.com/yilong888/B…
