中國地圖顯示各個區域城市js效果+SVG地圖(仿百度旅游)

2024-09-06 12:41:06

字體：大中小

來源：轉載

供稿：網友

html代碼如下

<!--    <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代碼

$('#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）
});