-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery中国省份地图插件(加Bootstrap).html
86 lines (82 loc) · 16.2 KB
/
jquery中国省份地图插件(加Bootstrap).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<!-- saved from url=(0047)http://yanshi.sucaihuo.com/jquery/38/3802/demo/ -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery中国省份地图插件(加Bootstrap)</title>
<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/style-map.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="header">
<h1>下拉框中选择中国省份，在地图上面高亮显示</h1>
</header>
<div class="container">
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province1">Province</label>
<select class="form-control" id="province1"><option value="" data-code="">—— 省 ——</option><option value="北京市" data-code="110000" selected="">北京市</option><option value="天津市" data-code="120000">天津市</option><option value="河北省" data-code="130000">河北省</option><option value="山西省" data-code="140000">山西省</option><option value="内蒙古自治区" data-code="150000">内蒙古自治区</option><option value="辽宁省" data-code="210000">辽宁省</option><option value="吉林省" data-code="220000">吉林省</option><option value="黑龙江省" data-code="230000">黑龙江省</option><option value="上海市" data-code="310000">上海市</option><option value="江苏省" data-code="320000">江苏省</option><option value="浙江省" data-code="330000">浙江省</option><option value="安徽省" data-code="340000">安徽省</option><option value="福建省" data-code="350000">福建省</option><option value="江西省" data-code="360000">江西省</option><option value="山东省" data-code="370000">山东省</option><option value="河南省" data-code="410000">河南省</option><option value="湖北省" data-code="420000">湖北省</option><option value="湖南省" data-code="430000">湖南省</option><option value="广东省" data-code="440000">广东省</option><option value="广西壮族自治区" data-code="450000">广西壮族自治区</option><option value="海南省" data-code="460000">海南省</option><option value="重庆市" data-code="500000">重庆市</option><option value="四川省" data-code="510000">四川省</option><option value="贵州省" data-code="520000">贵州省</option><option value="云南省" data-code="530000">云南省</option><option value="西藏自治区" data-code="540000">西藏自治区</option><option value="陕西省" data-code="610000">陕西省</option><option value="甘肃省" data-code="620000">甘肃省</option><option value="青海省" data-code="630000">青海省</option><option value="宁夏回族自治区" data-code="640000">宁夏回族自治区</option><option value="新疆维吾尔自治区" data-code="650000">新疆维吾尔自治区</option><option value="台湾省" data-code="710000">台湾省</option><option value="香港特别行政区" data-code="810000">香港特别行政区</option><option value="澳门特别行政区" data-code="820000">澳门特别行政区</option></select>
</div>
<div class="form-group">
<label class="sr-only" for="city1">City</label>
<select class="form-control" id="city1"><option value="" data-code="">—— 市 ——</option><option value="北京市市辖区" data-code="110100" selected="">北京市市辖区</option></select>
</div>
<div class="form-group">
<label class="sr-only" for="district1">District</label>
<select class="form-control" id="district1"><option value="" data-code="">—— 区 ——</option><option value="东城区" data-code="110101" selected="">东城区</option><option value="西城区" data-code="110102">西城区</option><option value="朝阳区" data-code="110105">朝阳区</option><option value="丰台区" data-code="110106">丰台区</option><option value="石景山区" data-code="110107">石景山区</option><option value="海淀区" data-code="110108">海淀区</option><option value="门头沟区" data-code="110109">门头沟区</option><option value="房山区" data-code="110111">房山区</option><option value="通州区" data-code="110112">通州区</option><option value="顺义区" data-code="110113">顺义区</option><option value="昌平区" data-code="110114">昌平区</option><option value="大兴区" data-code="110115">大兴区</option><option value="怀柔区" data-code="110116">怀柔区</option><option value="平谷区" data-code="110117">平谷区</option><option value="密云区" data-code="110118">密云区</option><option value="延庆区" data-code="110119">延庆区</option></select>
</div>
</div>
</form>
</div>
<div class="map">
<img src="./jquery中国省份地图插件(加Bootstrap)_files/map.jpg" width="716" height="595" usemap="#Map" border="0">
<div class="city"><div class="citybg" style="background:url(images/anhui.png) no-repeat 0 0; top:314px; left:523px; width:75px; height:90px;"></div><a style=" position:absolute; top:355px; left:545px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">安徽省</a></div>
<div class="city"><div class="citybg" style="background:url(images/neimeng.png) no-repeat 0 0; top:9px; left:296px; width:318px; height:272px;"></div><a style="position:absolute; top:211px; left:424px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">内蒙古自治区</a></div>
<div class="city"><div class="citybg" style=" background:url(images/heilongjiang.png) no-repeat 0 0; top:1px; left:550px; width:165px; height:151px;"></div><a style="position:absolute;top:81px; left:624px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">黑龙江省</a></div>
<div class="city"><div class="citybg" style="background: url("images/xinjiang.png") 0px 0px no-repeat; top: 73px; left: 0px; width: 292px; height: 223px; display: none;"></div><a style="position:absolute;top:211px; left:124px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">新疆维吾尔自治区</a></div>
<div class="city"><div class="citybg" style="background: url("images/xizang.png") 0px 0px no-repeat; top: 275px; left: 31px; width: 281px; height: 175px; display: none;"></div><a style="position:absolute;top:361px; left:145px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">西藏自治区</a></div>
<div class="city"><div class="citybg" style=" background:url(images/qinghai.png) no-repeat 0 0; top:240px; left:182px; width:185px; height:135px;"></div><a style="position:absolute;top:300px; left:254px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">青海省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/gansu.png) no-repeat 0 0; top:187px; left:236px; width:207px; height:177px;"></div><a style="position:absolute;top:310px; left:364px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">甘肃省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/ningxia.png) no-repeat 0 0; top:245px; left:379px; width:49px; height:75px;"></div><a style="position:absolute;top:272px; left:390px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">宁夏回族自治区</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shanghai.png) no-repeat 0 0; top:354px; left:610px; width:23px; height:22px;"></div><a style="position:absolute;top:352px; left:615px;; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">上海市</a></div>
<div class="city"><div class="citybg" style=" background:url(images/liaoning.png) no-repeat 0 0; top:161px; left:557px; width:91px; height:87px;"></div><a style="position:absolute;top:180px; left:600px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">辽宁省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/guangdong.png) no-repeat 0 0; top:470px; left:464px; width:111px; height:88px;"></div><a style="position:absolute;top:490px; left:500px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">广东省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/guangxi.png) no-repeat 0 0; top:454px; left:382px; width:118px; height:92px;"></div><a style="position:absolute;top:488px; left:432px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">广西壮族自治区</a></div>
<div class="city"><div class="citybg" style=" background:url(images/henan.png) no-repeat 0 0; top:288px; left:461px; width:118px; height:92px;"></div><a style="position:absolute;top:320px; left:490px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">河南省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shanxi.png) no-repeat 0 0; top:242px; left:396px; width:79px; height:134px;"></div><a style="position:absolute;top:321px; left:430px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">陕西省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shanxi2.png) no-repeat 0 0; top:219px; left:458px; width:56px; height:112px;"></div><a style="position:absolute;top:271px; left:470px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">山西省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hebei.png) no-repeat 0 0; top:184px; left:497px; width:85px; height:118px;"></div><a style="position:absolute;top:247px; left:508px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">河北省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/jilin.png) no-repeat 0 0; top:113px; left:575px; width:125px; height:88px;"></div><a style="position:absolute;top:150px; left:642px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">吉林省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/beijing.png) no-repeat 0 0; top:210px; left:512px; width:50px; height:38px;"></div><a style="position:absolute;top:215px; left:515px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">北京市</a></div>
<div class="city"><div class="citybg" style=" background:url(images/tianjin.png) no-repeat 0 0; top:224px; left:535px; width:26px; height:34px;"></div><a style="position:absolute;top:229px; left:535px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">天津市</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shandong.png) no-repeat 0 0; top:256px; left:521px; width:103px; height:68px;"></div><a style="position:absolute;top:281px; left:540px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">山东省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/jiangsu.png) no-repeat 0 0; top:305px; left:539px; width:93px; height:72px;"></div><a style="position:absolute;top:321px; left:570px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">江苏省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hainan.png) no-repeat 0 0; top:556px; left:442px; width:89px; height:88px;"></div><a style="position:absolute;top:565px; left:450px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">海南省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hubei.png) no-repeat 0 0; top:345px; left:438px; width:115px; height:75px;"></div><a style="position:absolute;top:365px; left:480px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">湖北省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/yunnan.png) no-repeat 0 0; top:412px; left:280px; width:132px; height:138px;"></div><a style="position:absolute;top:485px; left:320px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">云南省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/sichuan.png) no-repeat 0 0; top:328px; left:284px; width:161px; height:143px;"></div><a style="position:absolute;top:385px; left:345px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">四川省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/guizhou.png) no-repeat 0 0; top:409px; left:367px; width:93px; height:81px;"></div><a style="position:absolute;top:445px; left:405px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">贵州省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/taiwan.png) no-repeat 0 0; top:456px; left:613px; width:32px; height:65px;"></div><a style="position:absolute;top:475px; left:620px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">台湾省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/fujian.png) no-repeat 0 0; top:415px; left:548px; width:70px; height:84px;"></div><a style="position:absolute;top:445px; left:565px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">福建省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hunan.png) no-repeat 0 0; top:394px; left:445px; width:83px; height:96px;"></div><a style="position:absolute;top:425px; left:475px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">湖南省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/zhejiang.png) no-repeat 0 0; top:367px; left:574px; width:62px; height:70px;"></div><a style="position:absolute;top:395px; left:588px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">浙江省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/jiangxi.png) no-repeat 0 0; top:390px; left:513px; width:76px; height:98px;"></div><a style="position:absolute;top:425px; left:525px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">江西省</a></div>
<div class="city"><div class="citybg" style=" background:url(images/chongqing.png) no-repeat 0 0; top:363px; left:397px; width:70px; height:80px;"></div><a style="position:absolute;top:390px; left:420px; z-index:10;" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/index.html">重庆市</a></div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="./jquery中国省份地图插件(加Bootstrap)_files/distpicker.data.js"></script>
<script src="./jquery中国省份地图插件(加Bootstrap)_files/distpicker.js"></script>
<script src="./jquery中国省份地图插件(加Bootstrap)_files/main.js"></script>
<div class="sogoutip" style="z-index: 2147483645; visibility: hidden;"></div><div class="sogoubottom" id="sougou_bottom" style="display: none;"></div><div id="ext_stophi" style="z-index: 2147483647;"><div class="extnoticebg"></div><div class="extnotice"><h2>关闭提示 <a href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/#" title="关闭提示" id="closenotice" class="closenotice">关闭</a></h2><p id="sogouconfirmtxt"></p> <a id="sogouconfirm" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/#" class="extconfirm">确 认</a> <a id="sogoucancel" href="http://yanshi.sucaihuo.com/jquery/38/3802/demo/#" class="extconfirm">取 消</a></div></div><div id="ext_overlay" class="ext_overlayBG" style="display: none; z-index: 2147483646;"></div><iframe class="sogou_sugg_feedbackquan" frameborder="0" scrolling="no" src="./jquery中国省份地图插件(加Bootstrap)_files/yun6.html" style="background: transparent; border: none; display: none; height: 84px; width: 100%; z-index: 2147483645;"></iframe></body></html>