头像

原创自定义市县地图带点击跳转【原创

来源:http://www.sucaihuo.com/js/1917.html 凯爷 2017-05-10 19:59浏览(397) 收藏

jquery市区数据,鼠标悬浮有自定义弹出层,点击县或区到指定链接,echarts市区地图
原创自定义市县地图带点击跳转
分类:统计图 > 地图 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 2 下载资源 下载积分: 150 积分

生成地图区域#main

<div id="main" style="height: 100%"></div>

引入echarts地图插件和南昌市区数据

<script type="text/javascript" src="js/echarts.js"></script><!-- 引用echarts 3.0版本 -->
<script type="text/javascript" src="js/nanchang.js"></script>

ECharts 地图数据在线生成工具:http://ecomfe.github.io/echarts-map-tool/

1、范围 range:江西省 南昌市 所有区县
2、是否包含子区域 subregion:是
3、是否压缩 compress:不勾选
4、地图名称 name:nanchang(拼音即可)
5、生成JS
// 基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '江西·南昌',
        link: 'http://echarts.baidu.com/',
        subtext: '各区、县地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '<font style="color:#ffff00;font-size:18px;font-weight:600;">{b}</font><br>点击可跳转'
    },
    series: [{
            name: '南昌市',
            type: 'map',
            mapType: 'nanchang',
            selectedMode: 'single',
            label: {
                normal: {show: true},
                emphasis: {show: true}
            },
            data: [
                {name: '南昌县', selected: true}
            ]
        }]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
    myChart.on('click', function(params) {
        var district = params.name;
        var url = ['http://www.sucaihuo.com/source', 'http://www.sucaihuo.com/php', 'http://www.sucaihuo.com/templates'];
        if (district) {
            switch (district) {
                case '南昌县':
                    location.href = url[0];
                    break;
                case '进贤县':
                    location.href = url[1];
                    break;
                case '新建区':
                    location.href = url[2];
                    break;
                default:
                    break;
            }
        }
    });
}
标签: 地图echarts
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/1917.html
评论15
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 14楼
    08-21 11:04
    China_IT_cxj
    好东西,可以做出一个中国,哈哈哈
  • 头像 13楼
    06-01 19:49
    503820911
    不错的,谢谢了
  • 头像 12楼
    06-01 17:51
    xiaowei
    不错RRRRRRRRRRR
  • 头像 11楼
    05-24 21:01
    liyan
    效果还不错,沙发支持汗冷汗
  • 头像 10楼
    05-22 16:09
    万古尘
    实用不错
  • 头像 9楼
    05-15 10:33
    richer
    下载显示0次,大家喜欢的就收下吧。
  • 头像 8楼
    05-13 10:53
    空城旧梦旧人
    感谢作者,不错呀
  • 头像 7楼
    05-11 22:50
    wuyouzhuzhu
    感谢博主,感谢分享
  • 头像 6楼
    05-11 21:09
    liyan
    效果还是不错的哦晕
  • 头像 5楼
    05-11 18:47
    2878339630
    找了好多地方才找到的 感谢博主
1 2