先来看效果,太原市的地图,显示市下面的区,区下面的商户,默认显示3个商户信息,其余商户信息鼠标移动上去显示商户信息:
我是怎么做的呢?因为网上找的地图都不符合需求,所以从设计开始就按非常规方法:大致就是先代码模拟出市的轮廓->截图保存,ps处理,每个区保存为一个图层->需要的区加上颜色和区名->页面中使用整张地图作为背景图->其他文字信息一律代码写上去。
第一步:
- 由于echarts官网下载的包里只包含省份下面的市json文件,我们要的是市下面的区json文件,所以要先从网上找到对应的区json文件,放入map包里或者其他地方。
- 然后将json文件打开,复制代码,百度json在线格式化工具,方便我们复制粘贴区名,网址:http://www.bejson.com/。也可以更简单一点,不格