网页特效栏目收集了最全最新的前端网页插件，包括最流行的jQuery，Bootstrap，Js，Css，Vue等主流特效插件。
分享一款弹窗显示地图，可以在地图上选择省市的插件，有需要的朋友可以收藏一下。
具体代码如下：
<!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('/WebParts/SelectArea/hainan.htm');return false;">
<area shape="rect" coords="368,401,402,418" href="https://www.chinawutong.com/#" onclick="rt('澳门');return false;">
<area shape="rect" coords="398,387,430,403" href="https://www.chinawutong.com/#" onclick="rt('香港');return false;">
<area shape="rect" coords="440,361,476,376" href="https://www.chinawutong.com/#" onclick="rt('台湾');return false;">
<area shape="rect" coords="405,337,441,353" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/fujian.htm');return false;">
<area shape="rect" coords="235,364,271,380" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/yunnan.htm');return false;">
<area shape="rect" coords="285,335,321,354" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/guizhou.htm');return false;">
<area shape="rect" coords="359,368,396,387" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/guangdong.htm');return false;">
<area shape="rect" coords="309,370,345,387" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/guangxi.htm');return false;">
<area shape="rect" coords="87,245,126,272" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/xizang.htm');return false;">
<area shape="rect" coords="334,324,370,342" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/hunan.htm');return false;">
<area shape="rect" coords="245,289,282,305" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/sichuan.htm');return false;">
<area shape="rect" coords="290,299,327,316" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/chongqing.htm');return false;">
<area shape="rect" coords="339,283,374,301" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/hubei.htm');return false;">
<area shape="rect" coords="388,276,424,294" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/anhui.htm');return false;">
<area shape="rect" coords="381,316,413,333" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/jiangxi.htm');return false;">
<area shape="rect" coords="419,301,454,318" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/zhejiang.htm');return false;">
<area shape="rect" coords="447,276,483,293" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/shanghai.htm');return false;">
<area shape="rect" coords="277,173,321,190" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/neimenggu.htm');return false;">
<area shape="rect" coords="343,252,380,269" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/henan.htm');return false;">
<area shape="rect" coords="415,253,450,270" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/jiangsu.htm');return false;">
<area shape="rect" coords="358,205,394,220" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/hebei.htm');return false;">
<area shape="rect" coords="330,221,366,237" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/shanxi.htm');return false;">
<area shape="rect" coords="388,220,427,240" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/shandong.htm');return false;">
<area shape="rect" coords="370,179,402,196" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/beijing.htm');return false;">
<area shape="rect" coords="178,220,228,244" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/qinghai.htm');return false;">
<area shape="rect" coords="420,159,454,176" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/liaoning.htm');return false;">
<area shape="rect" coords="279,214,316,231" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/ningxia.htm');return false;">
<area shape="rect" coords="403,196,438,212" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/tianjin.htm');return false;">
<area shape="rect" coords="446,123,480,142" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/jilin.htm');return false;">
<area shape="rect" coords="444,90,488,108" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/heilongjiang.htm');return false;">
<area shape="rect" coords="191,177,234,200" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/gansu.htm');return false;">
<area shape="rect" coords="85,150,126,181" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/xinjiang.htm');return false;">
<area shape="rect" coords="301,254,336,271" href="https://www.chinawutong.com/#" onclick="openW('/WebParts/SelectArea/sx.htm');return false;">
<area shape="rect" coords="497,0,526,23" href="https://www.chinawutong.com/#" onclick="document.getElementById('div_map_hw').style.visibility='hidden';document.getElementById('frm_map_hw').style.visibility='hidden';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:'tc_from',cb:true}" readonly="readonly" />
</div>
</form>
</body>
</html> 转载请注明来源：jquery地图省市区城市地图选择器
本文永久链接地址：https://www.moyouyouw.cn/code/519.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论