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

查看演示 下载资源 下载积分： 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/

// 基于准备好的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;
            }
        }
    });
}