20200629175631429.png
1、首先先引入echarts.min.js文件，然后改造下beijing.json文件，改造后把json改成js文件。各省的json文件大家可以在網(wǎng)上搜下，如果要先成的文件可以給我留下郵箱，我發(fā)給大家。
<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、相關(guān)的文件都引入后，就可以構(gòu)建地圖了。 下面是簡(jiǎn)單的demo代碼，
echarts.registerMap('beijing', beijingJson);//這里用的那個(gè)省市的就寫那個(gè)省市的名字
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
title:{ //這里是標(biāo)題
text: '北京市輪廓地圖',
top: '3%',
left: 'center',//標(biāo)題居中顯示
textStyle: {//標(biāo)題的樣式
fontSize: 20,
fontWeight: 600,
color: '#222'
}
},
tooltip: {
// 觸發(fā)類型, 數(shù)據(jù)項(xiàng)圖形觸發(fā)
trigger: 'item',
formatter: function (val) {//這里是鼠標(biāo)滑過(guò)顯示的彈框，彈框可以根據(jù)自己的需求去寫
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,//是否開(kāi)啟鼠標(biāo)縮放和平移漫游
geoIndex: 0,// 不可缺少，否則無(wú)tooltip 指示效果
label: {
normal: {
show: true,//顯示省份標(biāo)簽
textStyle:{color:"#fff"}//省份標(biāo)簽字體顏色
},
emphasis: {//對(duì)應(yīng)的鼠標(biāo)懸浮效果
show: true,
textStyle:{color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//區(qū)域邊框?qū)挾? borderColor: '#0550c3',//區(qū)域邊框顏色
areaColor:"#17a34f",//區(qū)域顏色
},
emphasis: {
borderWidth: .95,//鼠標(biāo)滑過(guò)區(qū)域，區(qū)域邊框?qū)挾? borderColor: '#fff',//鼠標(biāo)滑過(guò)區(qū)域，區(qū)域邊框顏色
areaColor:"#ff6511",//鼠標(biāo)滑過(guò)區(qū)域背景色
}
},
data: [//這里是數(shù)據(jù)
{
name: '延慶區(qū)',
url:'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',
value: '好鄰居！可玩的地兒多的數(shù)不過(guò)來(lái)！',
lng: 115.981186,
lat: 40.462706
},
{
name: '懷柔區(qū)',
url:'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
value: '好鄰居！可玩的地兒多的數(shù)不過(guò)來(lái)！',
lng: 116.63853,
lat: 40.322563
},
{
name: '密云區(qū)',
url:'https://pic4.zhimg.com/50/v2-270ccddee1da949f5a951da1220b373a_hd.jpg',
value: '好鄰居！可玩的地兒多的數(shù)不過(guò)來(lái)！',
lng: 116.849551,
lat: 40.382999
},
{
name: '昌平區(qū)',
url:'https://pic2.zhimg.com/50/v2-ec095df48d0362d3eb4d0525d4394e16_hd.jpg',
value: '立水橋、回龍觀、西三旗、明朝十三陵',
lng: 116.237832,
lat: 40.226854
},
{
name: '順義區(qū)',
url:'https://pic4.zhimg.com/50/v2-4eab4a0caf6b0382c115005992bd6de0_hd.jpg',
value: '順義城關(guān)、天竺、南法信、高麗營(yíng)',
lng: 116.663242,
lat: 40.1362
},
{
name: '平谷區(qū)',
url:'https://pic3.zhimg.com/50/v2-273aed32f94cceb43f03fa389265d8d7_hd.jpg',
value: '平谷鎮(zhèn)，金海湖鎮(zhèn)，京東大溶洞',
lng: 117.128025,
lat: 40.147115
},
{
name: '門頭溝區(qū)',
url:'https://pic2.zhimg.com/50/v2-8492e1436403ff4b1305ee031b2b7e94_hd.jpg',
value: '百花山、妙峰山、潭柘寺、戒臺(tái)寺、永定河',
lng: 116.108179,
lat: 39.94648
},
{
name: '海淀區(qū)',
url:'https://pic2.zhimg.com/50/v2-0a43a0d541eb2ff159c69122f2c1f154_hd.jpg',
value: '中關(guān)村、五道口、公主墳、頤和園',
lng: 116.304872,
lat: 39.96553
},
{
name: '石景山區(qū)',
url:'https://pic3.zhimg.com/80/v2-48a9b57c60e2f15c818c02b879420b73_720w.jpg',
value: '蘋果園、老古城、衙門口、玉泉路',
lng: 116.229612,
lat: 39.912017
},
{
name: '西城區(qū)',
url:'https://pic3.zhimg.com/v2-00aac6ebd1fe7abb4f2dbc287152bbb5_r.jpg',
value: '西單、什剎海、西直門、動(dòng)物園',
lng: 116.372397,
lat: 39.918561
},
{
name: '東城區(qū)',
url:'https://pic2.zhimg.com/50/v2-f3ba9dcfdbf8ee9a16827be4ee63d62c_hd.jpg',
value: '天安門、王府井、鐘鼓樓、東內(nèi)大街',
lng: 116.42272,
lat: 39.934579
},
{
name: '朝陽(yáng)區(qū)',
url:'https://pic2.zhimg.com/50/v2-d8f9da83aa06b7f6982918272befe909_hd.jpg',
value: '朝外大街、大北窯、亞運(yùn)村、三里屯',
lng: 116.449767,
lat: 39.927254
},
{
name: '通州區(qū)',
url:'https://pic3.zhimg.com/50/v2-6234a8e355289891af36a7bc15186976_hd.jpg',
value: '新華大街、北苑、管莊、八里橋',
lng: 116.662928,
lat: 39.917001
},
{
name: '大興區(qū)',
url:'https://pic2.zhimg.com/50/v2-05ae0a59a3ab00eb5debdf5cece23cd3_hd.jpg',
value: '黃村鎮(zhèn)、西紅門、亦莊、龐各莊',
lng: 116.348053,
lat: 39.732833
},
{
name: '房山區(qū)',
url:'https://pic2.zhimg.com/50/v2-4aa9534e0a120c7e4778e75ab07f2644_hd.jpg',
value: '良鄉(xiāng)、燕山、十渡、周口店',
lng: 116.149892,
lat: 39.755039
},
{
name: '豐臺(tái)區(qū)',
url:'https://pic4.zhimg.com/50/v2-425af7e363e02c9a16b9b49fa2f9d395_hd.jpg',
value: '豐臺(tái)鎮(zhèn)、方莊、大紅門、盧溝橋',
lng: 116.293105,
lat: 39.865042
}
]
}],
});
如果大家有需要要源碼的話可以在git上下載：（第一次寫的地圖，不喜勿噴），喜歡的話給個(gè)贊哈
