Use Echarts to achieve the map of provinces and cities, today have time to write a Beijing map demo. Take a look at the renderings:

1, first introduce echarts.min.js file, then modify the Beijing. json file, and then change the JSON file to JS file. You can search the JSON files of each province on the Internet. If you want the files to be completed first, you can leave your email address to me and I will send them to you.

<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>Copy the code

2. After all the relevant files have been imported, you can build the map. Here is a simple demo code,

echarts.registerMap('beijing', beijingJson); Var chart = echarts.init(document.getelementbyId ('main')); var chart = echarts.init(document.getelementbyId ('main')); Chart.setoption ({title:{// here is the title text: 'Beijing outline map ', top: '3%', left: 'center',// the title shows the center textStyle: {// The title style fontSize: 20, fontWeight: 600, color: '#222' } }, tooltip: { trigger: 'item', formatter: Function (val) {function (val) { Bounced can according to your requirements to write the return val. The data. The name + '< div class = "bjMap" >' + '< h2 > < img SRC = "' + val. Data. Url + "> < / h2 > '+' < p > '+ Val.data. value + '</p>' + '</div>'}}, series: [{type: 'map', map: 'Beijing ', map:' Beijing ', roam: true,// TextStyle :{color:"# FFF "}// {// Corresponding mouse hover effect show: true, textStyle:{color:"#323232"}}}, itemStyle: {normal: {borderWidth:.5,// '# 0550C3 ',// areaColor:"#17a34f",// areaColor:"# 17a34F ",// areaColor:"# 17a34F ",// areaColor:"# 17a34F ",// areaColor:"# 17a34F ",// areaColor: '# FFF ',// Mouse over area, area border color areaColor:"#ff6511",// mouse over area background color}}, data: [// here is the data {name: Yanqing district, url: 'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg' value: 'good neighbor! Can play the place of many to count!', LNG: 115.981186, lat: 40.462706}, {name: Huairou district, url: 'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg' value: 'good neighbor! Can play the place of many to count!', LNG: 116.63853, lat: 40.322563}, {name: 'in miyun area, url:' https://pic4.zhimg.com/50/v2-270ccddee1da949f5a951da1220b373a_hd.jpg 'value:' good neighbor! Can play the place of many to count! ', LNG: 116.849551, lat: 40.382999}, {name: Changping district, url: 'https://pic2.zhimg.com/50/v2-ec095df48d0362d3eb4d0525d4394e16_hd.jpg' value: 'LiShuiQiao, huilongguan, XiSanQi, Ming Ming tombs, LNG: 116.237832, lat: 40.226854}, {name: 'in shunyi, url:' https://pic4.zhimg.com/50/v2-4eab4a0caf6b0382c115005992bd6de0_hd.jpg 'value:' shunyi in chengguan, tianzhu, south letter, Korea 'camp, LNG: 116.663242, lat: 40.1362}, {name: Pinggu district, url: 'https://pic3.zhimg.com/50/v2-273aed32f94cceb43f03fa389265d8d7_hd.jpg' value: 'town, pinggu jinhai lake town, Beijing east big water-eroded cave', LNG: 117.128025, lat: 40.147115}, {name: 'mentougou district, url:' https://pic2.zhimg.com/50/v2-8492e1436403ff4b1305ee031b2b7e94_hd.jpg 'value:' the baihua, the miaofeng mountains, involved, both jie tai, yongding river ', LNG: 116.108179, lat: 39.94648}, {name: ', haidian district, url: 'https://pic2.zhimg.com/50/v2-0a43a0d541eb2ff159c69122f2c1f154_hd.jpg' value: 'the zhongguancun, wudaokou, gongzhufen, the Summer Palace, LNG: 116.304872, lat: 39.96553}, {name: 'the shijingshan district, url:' https://pic3.zhimg.com/80/v2-48a9b57c60e2f15c818c02b879420b73_720w.jpg 'value:' apple orchards, old city, the government, yuquan road 'mouth, LNG: 116.229612, lat: 39.912017}, {name: Xicheng district, url: 'https://pic3.zhimg.com/v2-00aac6ebd1fe7abb4f2dbc287152bbb5_r.jpg' value: 'xidan, quadrangles, xizhimen, the zoo, LNG: 116.372397, lat: 39.918561}, {name: 'in dongcheng district, url:' https://pic2.zhimg.com/50/v2-f3ba9dcfdbf8ee9a16827be4ee63d62c_hd.jpg 'value:' 'in tiananmen square, wangfujing, drum tower, east street, LNG: 116.42272, lat: 39.934579}, {name: Chaoyang district, url: 'https://pic2.zhimg.com/50/v2-d8f9da83aa06b7f6982918272befe909_hd.jpg' value: 'chaowai street, big north kiln, Asian games village, sanlitun', LNG: 116.449767, lat: 39.927254}, {name: Tongzhou district, url: 'https://pic3.zhimg.com/50/v2-6234a8e355289891af36a7bc15186976_hd.jpg' value: 'xinhua street, beiyuan, GuanZhuang, eight mile bridge, LNG: 116.662928, lat: 39.917001}, {name: Daxing district, url: 'https://pic2.zhimg.com/50/v2-05ae0a59a3ab00eb5debdf5cece23cd3_hd.jpg' value: 'huangcun township, west red door, e-town, panggezhuang', LNG: 116.348053, lat: 39.732833}, {name: 'fangshan district, url:' https://pic2.zhimg.com/50/v2-4aa9534e0a120c7e4778e75ab07f2644_hd.jpg 'value:' award, yanshan, ShiDu, zhoukoudian, LNG: 116.149892, lat: 39.755039}, {name: 'fengtai, url:' https://pic4.zhimg.com/50/v2-425af7e363e02c9a16b9b49fa2f9d395_hd.jpg 'value:' town, fangzhuang, grand palace gate, fengtai lugouqiao, LNG: Lat: 39.865042}]}],});Copy the code

If you need the source code, you can download it on git :(the first time I wrote the map, don’t spray if you don’t like, welcome everyone to like! Gitee.com/yilong888/B…