中国地图显示各个区域城市js效果+SVG地图(仿百度旅游)

2018-06-23 23:02:30 围观 :

 中国地图显示各个区域城市js效果+SVG地图(仿百度旅游)

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'],才能正确显示对应省内容

中国地图显示各个区域城市js效果+SVG地图(仿百度旅游).zip
文件类型: .zip 95b58841581d070a413a83b60a50558d.zip (122.40 KB)
    匿名评论
  • 评论
人参与,条评论

相关文章

    无相关信息
网站分类