JQuery绘制北京地铁线路图
生活随笔
收集整理的這篇文章主要介紹了
JQuery绘制北京地铁线路图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[img]http://dl.iteye.com/upload/attachment/0082/1655/8f4cb561-5ffe-3fd0-b39b-7ed895777d1b.jpg[/img]圖片預覽
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>地鐵線路測試</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.subwayMap-0.5.0.js"></script>
<style type="text/css">
body
{
font-family: Verdana;
font-size: 8pt;
}
/* The main DIV for the map */
.subway-map
{
margin: 0;
width: 800px;
height:410px;
background-color: white;
}
/* Text labels */
.text
{
text-decoration: none;
color: black;
}
#legend
{
float: left;
width: 250px;
height:400px;
}
#legend div
{
height: 20px;
}
#legend span
{
margin: 5px 5px 5px 0;
}
.subway-map span
{
margin: 5px 5px 5px 0;
}
</style>
</head>
<body>
<div class="subway-map" data-columns="44" data-rows="40" data-cellSize="85" data-legendId="legend" data-textClass="text" data-gridNumbers="false" data-grid="false" data-lineWidth="6">
<ul data-color="pink" data-label="昌平線">
<li data-coords="4,1" data-marker="interchange" ><a href="http://jqueryui.com/demos/accordion/">南詔</a></li>
<li data-coords="4.5,1" data-marker="interchange" data-labelPos="N" ><a href="http://jqueryui.com/demos/accordion/">沙河高教園</a></li>
<li data-coords="5,1" data-marker="interchange" data-labelPos="S" ><a href="http://jqueryui.com/demos/accordion/">沙河</a></li>
<li data-coords="5.5,1" data-marker="interchange" data-labelPos="N" ><a href="http://jqueryui.com/demos/accordion/">鞏華城</a></li>
<li data-coords="6,1.25" data-marker="interchange" data-labelPos="N" ><a href="http://jqueryui.com/demos/accordion/">朱辛莊</a></li>
<li data-coords="6.5,1.5" data-marker="interchange" data-labelPos="S" ><a href="http://jqueryui.com/demos/accordion/">生命科技園</a></li>
<li data-coords="7,1.75" data-marker="interchange" data-labelPos="S" date-line="h5"><a href="http://jqueryui.com/demos/accordion/">西二旗</a></li>
</ul>
<ul data-color="yellow" data-label="13號線">
<li data-coords="7.2,5.2" data-marker="interchange" data-labelPos="W">西直門</li>
<li data-coords="7,4.2" data-marker="interchange" data-labelPos="W">大鐘寺</li>
<li data-coords="7,3.4" data-marker="interchange" data-labelPos="W">知春路</li>
<li data-coords="7,2.9" data-marker="interchange" data-labelPos="W">五道口</li>
<li data-coords="7,2.4" data-marker="interchange" data-labelPos="W">上地</li>
<li data-coords="7,1.75" data-marker="interchange" data-labelPos="E"></li>
<li data-coords="7.3,1.65" data-marker="interchange" data-dir="E"></li>
<li data-coords="7.6,1.5.5" data-marker="interchange" data-dir="N"></li>
<li data-coords="7.7,1.45" data-marker="interchange" data-dir="N"></li>
<li data-coords="7.8,1.4" data-marker="interchange" data-dir="E"></li>
<li data-coords="8,1.4" data-marker="interchange" data-dir="N">龍澤</li>
<li data-coords="9,1.4" data-marker="interchange" >回龍觀</li>
<li data-coords="10,1.4" data-marker="interchange" >霍營</li>
<li data-coords="11,1.4"></li>
<li data-coords="12,1.4" data-marker="interchange" data-markerInfo="v2" data-dir="E" data-labelPos="W">立水橋</li>
<li data-coords="12.6,1.5" data-marker="interchange" data-dir="S" data-labelPos="W"></li>
<li data-coords="12.8,1.6" data-marker="interchange" data-dir="S" data-labelPos="W"></li>
<li data-coords="13,2" data-marker="interchange" data-dir="S" data-labelPos="W">北苑</li>
<li data-coords="13,2.6" data-marker="interchange" data-dir="S" data-labelPos="W">望京西</li>
<li data-coords="13,3.2" data-marker="interchange" data-dir="S" data-labelPos="W">芍藥居</li>
<li data-coords="13,4" data-marker="interchange" data-dir="S" data-labelPos="W">光熙門</li>
<li data-coords="13,4.6" data-marker="interchange" data-dir="S" data-labelPos="W">柳芳</li>
<li data-coords="12.8,5.2" data-marker="interchange" data-dir="S" data-labelPos="W">東直門</li>
</ul>
<ul data-color="violet" data-label="5號線">
<li data-coords="12,0.2" data-marker="interchange" data-labelPos="W">天通苑北</li>
<li data-coords="12,0.6" data-marker="interchange" data-labelPos="E">天通苑</li>
<li data-coords="12,1" data-marker="interchange" data-labelPos="W">天通苑南</li>
<li data-coords="12,1.8" data-marker="interchange" data-labelPos="W">立水橋南</li>
<li data-coords="12,2.2" data-marker="interchange" data-labelPos="W">北苑路北</li>
<li data-coords="12,2.6" data-marker="interchange" data-labelPos="W">大屯路東</li>
<li data-coords="12,3" data-marker="interchange" data-labelPos="W">惠新西街北口</li>
<li data-coords="12,3.4" data-marker="interchange" data-labelPos="W">惠新西街南口</li>
<li data-coords="12,4" data-marker="interchange" data-labelPos="W">和平西橋</li>
<li data-coords="12,4.4" data-marker="interchange" data-labelPos="W">和平西里北街</li>
<li data-coords="12,4.8" data-marker="interchange" data-labelPos="W">雍和宮</li>
<li data-coords="12,5.2" data-marker="interchange" data-labelPos="W">北新橋</li>
<li data-coords="12,5.6" data-marker="interchange" data-labelPos="W">張自忠路</li>
<li data-coords="12,6" data-marker="interchange" data-labelPos="W">東四</li>
<li data-coords="12,6.4" data-marker="interchange" data-labelPos="W">燈市口</li>
<li data-coords="12,6.8" data-marker="interchange" data-labelPos="W">東單</li>
<li data-coords="12,7.2" data-marker="interchange" data-labelPos="W">崇文門</li>
<li data-coords="12,7.6" data-marker="interchange" data-labelPos="W">磁器口</li>
<li data-coords="12,8" data-marker="interchange" data-labelPos="W">天壇東口</li>
<li data-coords="12,8.4" data-marker="interchange" data-labelPos="W">蒲黃榆</li>
<li data-coords="12,8.8" data-marker="interchange" data-labelPos="W">劉家窯</li>
<li data-coords="12,9.2" data-marker="interchange" data-labelPos="W">宋家莊</li>
</ul>
<ul data-color="#ff6e00" data-label="亦莊線">
<li data-coords="12,9.2" data-marker="interchange" data-labelPos="W"></li>
<li data-coords="12.4,9.6" data-marker="interchange" data-labelPos="W">肖村</li>
<li data-coords="12.8,10" data-marker="interchange" data-labelPos="W">小紅門</li>
<li data-coords="13.2,10.4" data-marker="interchange" data-labelPos="W">舊宮</li>
<li data-coords="13.6,10.8" data-marker="interchange" data-labelPos="W">亦莊橋</li>
<li data-coords="14,11.2" data-marker="interchange" data-labelPos="W">亦莊文化園</li>
<li data-coords="14.4,11.6" data-marker="interchange" data-labelPos="W">萬源街</li>
<li data-coords="14.8,12" data-marker="interchange" data-labelPos="W">榮昌東街</li>
<li data-coords="15.4,12" data-marker="interchange" data-labelPos="S">同濟南路</li>
<li data-coords="16,12" data-marker="interchange" data-labelPos="N">經海路</li>
<li data-coords="16.8,12" data-marker="interchange" data-labelPos="S">次渠南</li>
<li data-coords="17.4,12" data-marker="interchange" data-labelPos="S">次渠</li>
</ul>
</div>
<div id="legend"></div>
<script type="text/javascript">
$(".subway-map").subwayMap({ debug: true });
</script>
</body>
</html>
subway Map 下載地址[url]http://kalyani.com/2010/10/subway-map-visualization-jquery-plugin/[/url]
完成了部分線路圓角啥的調的不大好 需要用的自己改下,這個控件只能在支持html5的瀏覽器上瀏覽,希望牛人弄個完整的給我發過來 910112176@qq.com 拋磚引玉了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>地鐵線路測試</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.subwayMap-0.5.0.js"></script>
<style type="text/css">
body
{
font-family: Verdana;
font-size: 8pt;
}
/* The main DIV for the map */
.subway-map
{
margin: 0;
width: 800px;
height:410px;
background-color: white;
}
/* Text labels */
.text
{
text-decoration: none;
color: black;
}
#legend
{
float: left;
width: 250px;
height:400px;
}
#legend div
{
height: 20px;
}
#legend span
{
margin: 5px 5px 5px 0;
}
.subway-map span
{
margin: 5px 5px 5px 0;
}
</style>
</head>
<body>
<div class="subway-map" data-columns="44" data-rows="40" data-cellSize="85" data-legendId="legend" data-textClass="text" data-gridNumbers="false" data-grid="false" data-lineWidth="6">
<ul data-color="pink" data-label="昌平線">
<li data-coords="4,1" data-marker="interchange" ><a href="http://jqueryui.com/demos/accordion/">南詔</a></li>
<li data-coords="4.5,1" data-marker="interchange" data-labelPos="N" ><a href="http://jqueryui.com/demos/accordion/">沙河高教園</a></li>
<li data-coords="5,1" data-marker="interchange" data-labelPos="S" ><a href="http://jqueryui.com/demos/accordion/">沙河</a></li>
<li data-coords="5.5,1" data-marker="interchange" data-labelPos="N" ><a href="http://jqueryui.com/demos/accordion/">鞏華城</a></li>
<li data-coords="6,1.25" data-marker="interchange" data-labelPos="N" ><a href="http://jqueryui.com/demos/accordion/">朱辛莊</a></li>
<li data-coords="6.5,1.5" data-marker="interchange" data-labelPos="S" ><a href="http://jqueryui.com/demos/accordion/">生命科技園</a></li>
<li data-coords="7,1.75" data-marker="interchange" data-labelPos="S" date-line="h5"><a href="http://jqueryui.com/demos/accordion/">西二旗</a></li>
</ul>
<ul data-color="yellow" data-label="13號線">
<li data-coords="7.2,5.2" data-marker="interchange" data-labelPos="W">西直門</li>
<li data-coords="7,4.2" data-marker="interchange" data-labelPos="W">大鐘寺</li>
<li data-coords="7,3.4" data-marker="interchange" data-labelPos="W">知春路</li>
<li data-coords="7,2.9" data-marker="interchange" data-labelPos="W">五道口</li>
<li data-coords="7,2.4" data-marker="interchange" data-labelPos="W">上地</li>
<li data-coords="7,1.75" data-marker="interchange" data-labelPos="E"></li>
<li data-coords="7.3,1.65" data-marker="interchange" data-dir="E"></li>
<li data-coords="7.6,1.5.5" data-marker="interchange" data-dir="N"></li>
<li data-coords="7.7,1.45" data-marker="interchange" data-dir="N"></li>
<li data-coords="7.8,1.4" data-marker="interchange" data-dir="E"></li>
<li data-coords="8,1.4" data-marker="interchange" data-dir="N">龍澤</li>
<li data-coords="9,1.4" data-marker="interchange" >回龍觀</li>
<li data-coords="10,1.4" data-marker="interchange" >霍營</li>
<li data-coords="11,1.4"></li>
<li data-coords="12,1.4" data-marker="interchange" data-markerInfo="v2" data-dir="E" data-labelPos="W">立水橋</li>
<li data-coords="12.6,1.5" data-marker="interchange" data-dir="S" data-labelPos="W"></li>
<li data-coords="12.8,1.6" data-marker="interchange" data-dir="S" data-labelPos="W"></li>
<li data-coords="13,2" data-marker="interchange" data-dir="S" data-labelPos="W">北苑</li>
<li data-coords="13,2.6" data-marker="interchange" data-dir="S" data-labelPos="W">望京西</li>
<li data-coords="13,3.2" data-marker="interchange" data-dir="S" data-labelPos="W">芍藥居</li>
<li data-coords="13,4" data-marker="interchange" data-dir="S" data-labelPos="W">光熙門</li>
<li data-coords="13,4.6" data-marker="interchange" data-dir="S" data-labelPos="W">柳芳</li>
<li data-coords="12.8,5.2" data-marker="interchange" data-dir="S" data-labelPos="W">東直門</li>
</ul>
<ul data-color="violet" data-label="5號線">
<li data-coords="12,0.2" data-marker="interchange" data-labelPos="W">天通苑北</li>
<li data-coords="12,0.6" data-marker="interchange" data-labelPos="E">天通苑</li>
<li data-coords="12,1" data-marker="interchange" data-labelPos="W">天通苑南</li>
<li data-coords="12,1.8" data-marker="interchange" data-labelPos="W">立水橋南</li>
<li data-coords="12,2.2" data-marker="interchange" data-labelPos="W">北苑路北</li>
<li data-coords="12,2.6" data-marker="interchange" data-labelPos="W">大屯路東</li>
<li data-coords="12,3" data-marker="interchange" data-labelPos="W">惠新西街北口</li>
<li data-coords="12,3.4" data-marker="interchange" data-labelPos="W">惠新西街南口</li>
<li data-coords="12,4" data-marker="interchange" data-labelPos="W">和平西橋</li>
<li data-coords="12,4.4" data-marker="interchange" data-labelPos="W">和平西里北街</li>
<li data-coords="12,4.8" data-marker="interchange" data-labelPos="W">雍和宮</li>
<li data-coords="12,5.2" data-marker="interchange" data-labelPos="W">北新橋</li>
<li data-coords="12,5.6" data-marker="interchange" data-labelPos="W">張自忠路</li>
<li data-coords="12,6" data-marker="interchange" data-labelPos="W">東四</li>
<li data-coords="12,6.4" data-marker="interchange" data-labelPos="W">燈市口</li>
<li data-coords="12,6.8" data-marker="interchange" data-labelPos="W">東單</li>
<li data-coords="12,7.2" data-marker="interchange" data-labelPos="W">崇文門</li>
<li data-coords="12,7.6" data-marker="interchange" data-labelPos="W">磁器口</li>
<li data-coords="12,8" data-marker="interchange" data-labelPos="W">天壇東口</li>
<li data-coords="12,8.4" data-marker="interchange" data-labelPos="W">蒲黃榆</li>
<li data-coords="12,8.8" data-marker="interchange" data-labelPos="W">劉家窯</li>
<li data-coords="12,9.2" data-marker="interchange" data-labelPos="W">宋家莊</li>
</ul>
<ul data-color="#ff6e00" data-label="亦莊線">
<li data-coords="12,9.2" data-marker="interchange" data-labelPos="W"></li>
<li data-coords="12.4,9.6" data-marker="interchange" data-labelPos="W">肖村</li>
<li data-coords="12.8,10" data-marker="interchange" data-labelPos="W">小紅門</li>
<li data-coords="13.2,10.4" data-marker="interchange" data-labelPos="W">舊宮</li>
<li data-coords="13.6,10.8" data-marker="interchange" data-labelPos="W">亦莊橋</li>
<li data-coords="14,11.2" data-marker="interchange" data-labelPos="W">亦莊文化園</li>
<li data-coords="14.4,11.6" data-marker="interchange" data-labelPos="W">萬源街</li>
<li data-coords="14.8,12" data-marker="interchange" data-labelPos="W">榮昌東街</li>
<li data-coords="15.4,12" data-marker="interchange" data-labelPos="S">同濟南路</li>
<li data-coords="16,12" data-marker="interchange" data-labelPos="N">經海路</li>
<li data-coords="16.8,12" data-marker="interchange" data-labelPos="S">次渠南</li>
<li data-coords="17.4,12" data-marker="interchange" data-labelPos="S">次渠</li>
</ul>
</div>
<div id="legend"></div>
<script type="text/javascript">
$(".subway-map").subwayMap({ debug: true });
</script>
</body>
</html>
subway Map 下載地址[url]http://kalyani.com/2010/10/subway-map-visualization-jquery-plugin/[/url]
完成了部分線路圓角啥的調的不大好 需要用的自己改下,這個控件只能在支持html5的瀏覽器上瀏覽,希望牛人弄個完整的給我發過來 910112176@qq.com 拋磚引玉了
總結
以上是生活随笔為你收集整理的JQuery绘制北京地铁线路图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机交换机配置实验心得,交换机系统配置
- 下一篇： bzoj 3620: 似乎在梦中见过的样