因为项目要做一个辽宁省特产区域,涉及到地图。
话不多说上代码
前端
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>辽宁地区</title>
</head>
<body>
<div id="main" style="height:800px;"></div>
<script src="__PUBLIC__/Home/js/jquery-1.12.1.min.js"></script>
<script type="text/JavaScript" src="__PUBLIC__/echarts/echarts.js"></script>
<script type="text/JavaScript" src="__PUBLIC__/echarts/liaoning.js"></script>
<script type="text/javascript">
var flag = true;
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
layoutSize: 100 ,
series: [{
name:'辽宁地区',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:flag}}, //地图初始化城市名称是否展示
emphasis:{label:{show:true}} //鼠标移入城市名称是否展示
},
type: 'map',
map: 'liaoning'
}]
});
chart.on('click', function (param){
var selected = param.name;
if (selected) {
switch(selected){
case '沈阳市':
location.href = "{:U('Goods/index_city',array('id'=>3))}";
break;
case '葫芦岛市':
location.href = "{:U('Goods/index_city',array('id'=>14))}";
break;
case '朝阳市':
location.href = "{:U('Goods/index_city',array('id'=>13))}";
break;
case '锦州市':
location.href = "{:U('Goods/index_city',array('id'=>12))}";
break;
case '阜新市':
location.href ="{:U('Goods/index_city',array('id'=>11))}";
break;
case '盘锦市':
location.href = "{:U('Goods/index_city',array('id'=>10))}";
break;
case '大连市':
location.href = "{:U('Goods/index_city',array('id'=>9))}";
break;
case '营口市':
location.href = "{:U('Goods/index_city',array('id'=>8))}";
break;
case '鞍山市':
location.href = "{:U('Goods/index_city',array('id'=>7))}";
break;
case '丹东市':
location.href = "{:U('Goods/index_city',array('id'=>6))}";
break;
case '辽阳市':
location.href = "{:U('Goods/index_city',array('id'=>5))}";
break;
case '本溪市':
location.href = "{:U('Goods/index_city',array('id'=>4))}";
break;
case '抚顺市':
location.href ="{:U('Goods/index_city',array('id'=>2))}";
break;
case '铁岭市':
location.href = "{:U('Goods/index_city',array('id'=>1))}";
break;
default:
break;
}
}
});
window.onresize = chart.resize();
</script>
</body>
</html>
目前还有点问题,地图大小不会调整,记得引入城市js文件。
别的没啥了。