帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery地图省市区城市地图选择器

帝国模板之家 2020-10-01 网页特效 评论

分享一款弹窗显示地图,可以在地图上选择省市的插件,有需要的朋友可以收藏一下。

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:wb="https://open.weibo.com/wb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link href="css/mapstyle.css" type="text/css" />
<div id="div_map_hw" style=" Z-INDEX: 100;visibility:hidden;POSITION: absolute;height:453px;width: 523px;"> <img src="images/china.jpg" alt="中国" width="527" height="457" border="0" usemap="#Map" />
  <map name="Map">
    <area shape="rect" coords="321,423,355,441" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/hainan.htm&#39;);return false;">
    <area shape="rect" coords="368,401,402,418" href="https://www.chinawutong.com/#" onclick="rt(&#39;澳门&#39;);return false;">
    <area shape="rect" coords="398,387,430,403" href="https://www.chinawutong.com/#" onclick="rt(&#39;香港&#39;);return false;">
    <area shape="rect" coords="440,361,476,376" href="https://www.chinawutong.com/#" onclick="rt(&#39;台湾&#39;);return false;">
    <area shape="rect" coords="405,337,441,353" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/fujian.htm&#39;);return false;">
    <area shape="rect" coords="235,364,271,380" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/yunnan.htm&#39;);return false;">
    <area shape="rect" coords="285,335,321,354" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/guizhou.htm&#39;);return false;">
    <area shape="rect" coords="359,368,396,387" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/guangdong.htm&#39;);return false;">
    <area shape="rect" coords="309,370,345,387" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/guangxi.htm&#39;);return false;">
    <area shape="rect" coords="87,245,126,272" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/xizang.htm&#39;);return false;">
    <area shape="rect" coords="334,324,370,342" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/hunan.htm&#39;);return false;">
    <area shape="rect" coords="245,289,282,305" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/sichuan.htm&#39;);return false;">
    <area shape="rect" coords="290,299,327,316" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/chongqing.htm&#39;);return false;">
    <area shape="rect" coords="339,283,374,301" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/hubei.htm&#39;);return false;">
    <area shape="rect" coords="388,276,424,294" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/anhui.htm&#39;);return false;">
    <area shape="rect" coords="381,316,413,333" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/jiangxi.htm&#39;);return false;">
    <area shape="rect" coords="419,301,454,318" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/zhejiang.htm&#39;);return false;">
    <area shape="rect" coords="447,276,483,293" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/shanghai.htm&#39;);return false;">
    <area shape="rect" coords="277,173,321,190" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/neimenggu.htm&#39;);return false;">
    <area shape="rect" coords="343,252,380,269" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/henan.htm&#39;);return false;">
    <area shape="rect" coords="415,253,450,270" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/jiangsu.htm&#39;);return false;">
    <area shape="rect" coords="358,205,394,220" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/hebei.htm&#39;);return false;">
    <area shape="rect" coords="330,221,366,237" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/shanxi.htm&#39;);return false;">
    <area shape="rect" coords="388,220,427,240" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/shandong.htm&#39;);return false;">
    <area shape="rect" coords="370,179,402,196" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/beijing.htm&#39;);return false;">
    <area shape="rect" coords="178,220,228,244" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/qinghai.htm&#39;);return false;">
    <area shape="rect" coords="420,159,454,176" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/liaoning.htm&#39;);return false;">
    <area shape="rect" coords="279,214,316,231" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/ningxia.htm&#39;);return false;">
    <area shape="rect" coords="403,196,438,212" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/tianjin.htm&#39;);return false;">
    <area shape="rect" coords="446,123,480,142" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/jilin.htm&#39;);return false;">
    <area shape="rect" coords="444,90,488,108" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/heilongjiang.htm&#39;);return false;">
    <area shape="rect" coords="191,177,234,200" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/gansu.htm&#39;);return false;">
    <area shape="rect" coords="85,150,126,181" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/xinjiang.htm&#39;);return false;">
    <area shape="rect" coords="301,254,336,271" href="https://www.chinawutong.com/#" onclick="openW(&#39;/WebParts/SelectArea/sx.htm&#39;);return false;">
    <area shape="rect" coords="497,0,526,23" href="https://www.chinawutong.com/#" onclick="document.getElementById(&#39;div_map_hw&#39;).style.visibility=&#39;hidden&#39;;document.getElementById(&#39;frm_map_hw&#39;).style.visibility=&#39;hidden&#39;;return false;">
  </map>
</div>
<link href="css/WTMap.css" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/WTMap.min.js"></script>
    </head>
<body>
<form  id="aspnetForm">
  <div class="chose">
    <label for="port">发货地</label>
    <input class="qi" id="tc_from" type="text" value="您的货物在哪里?" wtmap="{c:&#39;tc_from&#39;,cb:true}" readonly="readonly" />
  </div>
</form>
</body>
</html>
人生不要怕失败,因为失败连着成功。只有那些有勇气的人,才敢不断挑战人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言