中国地图显示各个区域城市js效果+SVG地图(仿百度旅游)
2018-06-23 站长 站长日志
html代码如下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- <div class="mapTipText mapTipText1">
<div class="mapTipImg"><img src="images/jilin.jpg" alt=""/></div>
<div class="mapTipList">
<h2><a href="">吉林<span>Jilin</span></a></h2>
<ul>
<li><a href="">长白山</a></li>
<li><a href="">长春</a></li>
<li><a href="">延吉</a></li>
<li><a href="">雾凇岛</a></li>
<li><a href="">集安</a></li>
<li><a href="">吉林市</a></li>
<li><a href="">查干湖</a></li>
<li><a href="">三角龙湾</a></li>
<li><a href="">通化</a></li>
<li><a href="">四平</a></li>
<li><a href="">松原</a></li>
<li><a href="">白城</a></li>
</ul>
</div>
</div>-->
|
然后是js代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('#ChinaMap').SVGMap({
mapWidth: 806, //地图宽度
mapHeight: 396， //地图高度
strokeWidth: 1, //各省边界线宽度
strokeColor: 'F9FCFE', //各省边界线颜色 默认 ：F9FCFE
strokeHoverColor: 'd9d9d9', //各省hover边界线颜色 默认 ：d9d9d9
stateInitColor: '', //统一各省展示颜色 默认 ：不统一按chinaMapConfig.js里面设置的颜色展示
stateHoverColor: 'ffffff', //各省hover展示颜色 默认 : ffffff
stateDisabledColor: 'eeeeee', //各省禁用展示颜色 默认 : eeeeee
showTip: true, //是否显示提示 默认显示
tipWidth: 280, //展示内容（白色区域）宽度（单位：px）
tipHeight: 110, //展示内容（白色区域）高度（单位：px）
tipOuterH : 30, //展示内容在上下的连接（透明灰色区域）高度（单位：px） 这个展示的方向也可以单独配置在chinaMapConfig.js的chinaMapConfig['names']['direction']中设置
tipOuterW : 30, //展示内容在左右的连接（透明灰色区域）宽度（单位：px）
});
|
模版中的div.mapTipText的第二个classmapTipText1中的数字要对应目录js/res/chinaMapConfig.js中数据chinaMapConfig['names']['id'],才能正确显示对应省内容