码上快乐
1秒登录
首页
榜单
标签
关于
搜索
相关内容
简体
繁体
ECharts-中国省市地图
本文转载自
查看原文
2019-08-19 21:57
3164
第三方组件
今天偶然看到天天快递的 "网点查询" -> “地图查询” 感觉很新奇。默认展示中国行政地图,点击省份后展示对应的省市地图。后来参考了 Echarts 官方实例 (
https://echarts.baidu.com/examples/editor.html?c=map-HK
),写了一个类似的 demo。
Demo 界面截图
1,默认展示中国行政地图
2,点击省份展示对应市级地图(这里以四川为例)
主要点
1,初始化地图 s ,加载 china.json 地图。
2,绑定 s 的点击事件,触发时加载不同的省份 json 地理数据(地理数据从天天官网地图获得。方法:点击 "地图查询", chrome 调试模式下可以看到加载不同了的 json 文件)
3,如果要返回全国地图,只要再次加载 china.json 文件即可。
4,关于区域上色等比较简单,直接参考 echarts 即可。这里不做说明.
net core Demo下载请点击
这里
代码简单说明
1,关键文件:_Layout.cshtml(C#的模版页,相关js引用与前台展示)与 echarts-map-action.js(echarts 图标操作)
2,各省地理数据文件 js/mapjson/xxx.json
3,echarts-map-action.js 中 initEcharts 方法是初始化,showProvince 方法是展示不同省的市级地图。
×
免责声明!
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。
猜您在找
Echarts-整合各省市地图及点位显示
echarts省市地图显示
echarts 实现省市地图
vue + echart 实现中国地图 和 省市地图(可切换省份)
echarts使用------地图生成----省市地图的生成及其他相关细节调整
echarts画中国地图,省市区地图分享
react使用Echarts绘制高亮可点击选中的省市地图
一个让echarts中国地图包含省市轮廓的技巧
一个让echarts中国地图包含省市轮廓的技巧
全国个省市地图 JSON文件 地址
粤ICP备18138465号
© 2018-2025 CODEPRJ.COM