深圳地鐵羅寶線和蛇口線示例:見上圖。
要求瀏覽器版本:browser does support HTML5 canvas element:Google Chrome V 8+;Mozilla Firefox V 3.6+;Opera V 11+;Apple Safari V 5+;Microsoft Internet Explorer V 9+。
javascript:
/*
Copyright (c) 2010 Nik Kalyani nik@kalyani.com http://www.kalyani.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
(function ($) {
var plugin = {
defaults: {
debug: false,
grid: false
},
options: {
},
identity: function (type) {
if (type === undefined) type = "name";
switch (type.toLowerCase()) {
case "version": return "1.0.0"; break;
default: return "subwayMap Plugin"; break;
}
},
_debug: function (s) {
if (this.options.debug)
this._log(s);
},
_log: function () {
if (window.console && window.console.log)
window.console.log('[subwayMap] ' + Array.prototype.join.call(arguments, ' '));
},
_supportsCanvas: function () {
var canvas = $("<canvas></canvas>");
if (canvas[0].getContext)
return true;
else
return false;
},
_getCanvasLayer: function (el, overlay) {
this.layer++;
var canvas = $("<canvas style='position:absolute;z-Index:" + ((overlay ? 2000 : 1000) + this.layer) + "' width='" + this.options.pixelWidth + "' height='" + this.options.pixelHeight + "'></canvas>");
el.append(canvas);
return (canvas[0].getContext("2d"));
},
_render: function (el) {
this.layer = -1;
var rows = el.attr("data-rows");
if (rows === undefined)
rows = 10;
else
rows = parseInt(rows);
var columns = el.attr("data-columns");
if (columns === undefined)
columns = 10;
else
columns = parseInt(columns);
var scale = el.attr("data-cellSize");
if (scale === undefined)
scale = 100;
else
scale = parseInt(scale);
var lineWidth = el.attr("data-lineWidth");
if (lineWidth === undefined)
lineWidth = 10;
else
lineWidth = parseInt(lineWidth);
var textClass = el.attr("data-textClass");
if (textClass === undefined) textClass = "";
var grid = el.attr("data-grid");
if ((grid === undefined) || (grid.toLowerCase() == "false"))
grid = false;
else
grid = true;
var legendId = el.attr("data-legendId");
if (legendId === undefined) legendId = "";
var gridNumbers = el.attr("data-gridNumbers");
if ((gridNumbers === undefined) || (gridNumbers.toLowerCase() == "false"))
gridNumbers = false;
else
gridNumbers = true;
var reverseMarkers = el.attr("data-reverseMarkers");
if ((reverseMarkers === undefined) || (reverseMarkers.toLowerCase() == "false"))
reverseMarkers = false;
else
reverseMarkers = true;
this.options.pixelWidth = columns * scale;
this.options.pixelHeight = rows * scale;
//el.css("width", this.options.pixelWidth);
//el.css("height", this.options.pixelHeight);
self = this;
var lineLabels = [];
var supportsCanvas = $("<canvas></canvas>")[0].getContext;
if (supportsCanvas) {
if (grid) this._drawGrid(el, scale, gridNumbers);
$(el).children("ul").each(function (index) {
var ul = $(this);
var color = $(ul).attr("data-color");
if (color === undefined) color = "#000000";
var lineTextClass = $(ul).attr("data-textClass");
if (lineTextClass === undefined) lineTextClass = "";
var shiftCoords = $(ul).attr("data-shiftCoords");
if (shiftCoords === undefined) shiftCoords = "";
var shiftX = 0.00;
var shiftY = 0.00;
if (shiftCoords.indexOf(",") > -1) {
shiftX = parseInt(shiftCoords.split(",")[0]) * lineWidth/scale;
shiftY = parseInt(shiftCoords.split(",")[1]) * lineWidth/scale;
}
var lineLabel = $(ul).attr("data-label");
if (lineLabel === undefined)
lineLabel = "Line " + index;
lineLabels[lineLabels.length] = {label: lineLabel, color: color};
var nodes = [];
$(ul).children("li").each(function () {
var coords = $(this).attr("data-coords");
if (coords === undefined) coords = "";
var dir = $(this).attr("data-dir");
if (dir === undefined) dir = "";
var labelPos = $(this).attr("data-labelPos");
if (labelPos === undefined) labelPos = "s";
var marker = $(this).attr("data-marker");
if (marker == undefined) marker = "";
var markerInfo = $(this).attr("data-markerInfo");
if (markerInfo == undefined) markerInfo = "";
var anchor = $(this).children("a:first-child");
var label = $(this).text();
if (label === undefined) label = "";
var link = "";
var title = "";
if (anchor != undefined) {
link = $(anchor).attr("href");
if (link === undefined) link = "";
title = $(anchor).attr("title");
if (title === undefined) title = "";
}
self._debug("Coords=" + coords + "; Dir=" + dir + "; Link=" + link + "; Label=" + label + "; labelPos=" + labelPos + "; Marker=" + marker);
var x = "";
var y = "";
if (coords.indexOf(",") > -1) {
x = Number(coords.split(",")[0]) + (marker.indexOf("interchange") > -1 ? 0 : shiftX);
y = Number(coords.split(",")[1]) + (marker.indexOf("interchange") > -1 ? 0 : shiftY);
}
nodes[nodes.length] = { x: x, y:y, direction: dir, marker: marker, markerInfo: markerInfo, link: link, title: title, label: label, labelPos: labelPos};
});
if (nodes.length > 0)
self._drawLine(el, scale, rows, columns, color, (lineTextClass != "" ? lineTextClass : textClass), lineWidth, nodes, reverseMarkers);
$(ul).remove();
});
if ((lineLabels.length > 0) && (legendId != ""))
{
var legend = $("#" + legendId);
for(var line=0; line<lineLabels.length; line++)
legend.append("<div><span style='float:left;width:100px;height:" + lineWidth + "px;background-color:" + lineLabels[line].color + "'></span>" + lineLabels[line].label + "</div>");
}
}
},
_drawLine: function (el, scale, rows, columns, color, textClass, width, nodes, reverseMarkers) {
var ctx = this._getCanvasLayer(el, false);
ctx.beginPath();
ctx.moveTo(nodes[0].x * scale, nodes[0].y * scale);
var markers = [];
var lineNodes = [];
for(var node = 0; node < nodes.length; node++)
{
if (nodes[node].marker.indexOf("@") != 0)
lineNodes[lineNodes.length] = nodes[node];
}
for (var lineNode = 0; lineNode < lineNodes.length; lineNode++) {
if (lineNode < (lineNodes.length - 1)) {
var nextNode = lineNodes[lineNode + 1];
var currNode = lineNodes[lineNode];
// Correction for edges so lines are not running off campus
var xCorr = 0;
var yCorr = 0;
if (nextNode.x == 0) xCorr = width / 2;
if (nextNode.x == columns) xCorr = -1 * width / 2;
if (nextNode.y == 0) yCorr = width / 2;
if (nextNode.y == rows) yCorr = -1 * width / 2;
var xVal = 0;
var yVal = 0;
var direction = "";
var xDiff = Math.round(Math.abs(currNode.x - nextNode.x));
var yDiff = Math.round(Math.abs(currNode.y - nextNode.y));
if ((xDiff == 0) || (yDiff == 0)) {
// Horizontal or Vertical
ctx.lineTo((nextNode.x * scale) + xCorr, (nextNode.y * scale) + yCorr);
}
else if ((xDiff == 1) && (yDiff == 1)) {
// 90 degree turn
if (nextNode.direction != "")
direction = nextNode.direction.toLowerCase();
switch (direction) {
case "s": xVal = 0; yVal = scale; break;
case "e": xVal = scale; yVal = 0; break;
case "w": xVal = -1 * scale; yVal = 0; break;
default: xVal = 0; yVal = -1 * scale; break;
}
ctx.quadraticCurveTo((currNode.x * scale) + xVal, (currNode.y * scale) + yVal,
(nextNode.x * scale) + xCorr, (nextNode.y * scale) + yCorr);
}
else if (xDiff == yDiff) {
// Symmetric, angular with curves at both ends
if (nextNode.x < currNode.x) {
if (nextNode.y < currNode.y)
direction = "nw";
else
direction = "sw";
}
else {
if (nextNode.y < currNode.y)
direction = "ne";
else
direction = "se";
}
var dirVal = 1;
switch (direction) {
case "nw": xVal = -1 * (scale / 2); yVal = 1; dirVal = 1; break;
case "sw": xVal = -1 * (scale / 2); yVal = -1; dirVal = 1; break;
case "se": xVal = (scale / 2); yVal = -1; dirVal = -1; break;
case "ne": xVal = (scale / 2); yVal = 1; dirVal = -1; break;
}
this._debug((currNode.x * scale) + xVal + ", " + (currNode.y * scale) + "; " + (nextNode.x + (dirVal * xDiff / 2)) * scale + ", " +
(nextNode.y + (yVal * xDiff / 2)) * scale)
ctx.bezierCurveTo(
(currNode.x * scale) + xVal, (currNode.y * scale),
(currNode.x * scale) + xVal, (currNode.y * scale),
(nextNode.x + (dirVal * xDiff / 2)) * scale, (nextNode.y + (yVal * xDiff / 2)) * scale);
ctx.bezierCurveTo(
(nextNode.x * scale) + (dirVal * scale / 2), (nextNode.y) * scale,
(nextNode.x * scale) + (dirVal * scale / 2), (nextNode.y) * scale,
nextNode.x * scale, nextNode.y * scale);
}
else
ctx.lineTo(nextNode.x * scale, nextNode.y * scale);
}
}
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
ctx = this._getCanvasLayer(el, true);
for (var node = 0; node < nodes.length; node++) {
this._drawMarker(el, ctx, scale, color, textClass, width, nodes[node], reverseMarkers);
}
},
_drawMarker: function (el, ctx, scale, color, textClass, width, data, reverseMarkers) {
if (data.label == "") return;
if (data.marker == "") data.marker = "station";
// Scale coordinates for rendering
var x = data.x * scale;
var y = data.y * scale;
// Keep it simple -- black on white, or white on black
var fgColor = "#000000";
var bgColor = "#ffffff";
if (reverseMarkers)
{
fgColor = "#ffffff";
bgColor = "#000000";
}
// Render station and interchange icons
ctx.strokeStyle = fgColor;
ctx.fillStyle = bgColor;
ctx.beginPath();
switch(data.marker.toLowerCase())
{
case "interchange":
case "@interchange":
ctx.lineWidth = width;
if (data.markerInfo == "")
ctx.arc(x, y, width * 0.7, 0, Math.PI * 2, true);
else
{
var mDir = data.markerInfo.substr(0,1).toLowerCase();
var mSize = parseInt(data.markerInfo.substr(1,10));
if (((mDir == "v") || (mDir == "h")) && (mSize > 1))
{
if (mDir == "v")
{
ctx.arc(x, y, width * 0.7,290 * Math.PI/180, 250 * Math.PI/180, false);
ctx.arc(x, y-(width*mSize), width * 0.7,110 * Math.PI/180, 70 * Math.PI/180, false);
}
else
{
ctx.arc(x, y, width * 0.7,20 * Math.PI/180, 340 * Math.PI/180, false);
ctx.arc(x+(width*mSize), y, width * 0.7,200 * Math.PI/180, 160 * Math.PI/180, false);
}
}
else
ctx.arc(x, y, width * 0.7, 0, Math.PI * 2, true);
}
break;
case "station":
case "@station":
ctx.lineWidth = width/2;
ctx.arc(x, y, width/2, 0, Math.PI * 2, true);
break;
}
ctx.closePath();
ctx.stroke();
ctx.fill();
// Render text labels and hyperlinks
var pos = "";
var offset = width + 4;
var topOffset = 0;
var centerOffset = "-50px";
switch(data.labelPos.toLowerCase())
{
case "n":
pos = "text-align: center; margin: 0 0 " + offset + "px " + centerOffset;
topOffset = offset * 2;
break;
case "w":
pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px";
topOffset = offset;
break;
case "e":
pos = "text-align: left; margin:0 0 0 " + offset + "px";
topOffset = offset;
break;
case "s":
pos = "text-align: center; margin:" + offset + "px 0 0 " + centerOffset;
break;
case "se":
pos = "text-align: left; margin:" + offset + "px 0 0 " + offset + "px";
break;
case "ne":
pos = "text-align: left; padding-left: " + offset + "px; margin: 0 0 " + offset + "px 0";
topOffset = offset * 2;
break;
case "sw": //TODO
pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px";
topOffset = offset;
break;
case "nw": //TODO
pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px";
topOffset = offset;
break;
}
var style = (textClass != "" ? "class='" + textClass + "' " : "") + "style='" + (textClass == "" ? "font-size:8pt;font-family:Verdana,Arial,Helvetica,Sans Serif;text-decoration:none;" : "") + "width:100px;" + (pos != "" ? pos : "") + ";position:absolute;top:" + (y + el.offset().top - (topOffset > 0 ? topOffset : 0)) + "px;left:" + (x + el.offset().left) + "px;z-index:3000;'";
if (data.link != "")
$("<a " + style + " title='" + data.title.replace(/\\n/g,"<br />") + "' href='" + data.link + "' target='_new'>" + data.label.replace(/\\n/g,"<br />") + "</span>").appendTo(el);
else
$("<span " + style + ">" + data.label.replace(/\\n/g,"<br />") + "</span>").appendTo(el);;
},
_drawGrid: function (el, scale, gridNumbers) {
var ctx = this._getCanvasLayer(el, false);
ctx.fillStyle = "#000";
ctx.beginPath();
var counter = 0;
for (var x = 0.5; x < this.options.pixelWidth; x += scale) {
if (gridNumbers)
{
ctx.moveTo(x, 0);
ctx.fillText(counter++, x-15, 10);
}
ctx.moveTo(x, 0);
ctx.lineTo(x, this.options.pixelHeight);
}
ctx.moveTo(this.options.pixelWidth - 0.5, 0);
ctx.lineTo(this.options.pixelWidth - 0.5, this.options.pixelHeight);
counter = 0;
for (var y = 0.5; y < this.options.pixelHeight; y += scale) {
if (gridNumbers)
{
ctx.moveTo(0, y);
ctx.fillText(counter++, 0, y-15);
}
ctx.moveTo(0, y);
ctx.lineTo(this.options.pixelWidth, y);
}
ctx.moveTo(0, this.options.pixelHeight - 0.5);
ctx.lineTo(this.options.pixelWidth, this.options.pixelHeight - 0.5);
ctx.strokeStyle = "#eee";
ctx.lineWidth = 1;
ctx.stroke();
ctx.fill();
ctx.closePath();
}
}
var methods = {
init: function (options) {
plugin.options = $.extend({}, plugin.defaults, options);
// iterate and reformat each matched element
return this.each(function (index) {
plugin.options = $.meta
? $.extend(plugin.options, $(this).data())
: plugin.options;
plugin._debug("BEGIN: " + plugin.identity() + " for element " + index);
plugin._render($(this));
plugin._debug("END: " + plugin.identity() + " for element " + index);
});
},
drawLine: function (data) {
plugin._drawLine(data.element, data.scale, data.rows, data.columns, data.color, data.width, data.nodes);
},
};
$.fn.subwayMap = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
html5:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Subway Map</title>
<meta name="author" content="Geovin Du,塗聚文">
<meta name="keyword" content="browser does support HTML5 canvas element:Google Chrome V 8+;Mozilla Firefox V 3.6+;Opera V 11+;Apple Safari V 5+;Microsoft Internet Explorer V 9+">
<script type="text/javascript" src="http://code.jquery.com/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: 500px;
height:410px;
background-color: white;
}
/* Text labels */
.text
{
text-decoration: none;
color: black;
}
#legend
{
float: left;
width: 250px;
height:400px;
}
#legend div
{
height: 25px;
}
#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="80" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="false" data-lineWidth="8">
<ul data-color="#00ff00" data-label="羅寶線(1號線)">
<li data-coords="4,6" data-marker="@interchange"><a href="http://www.dusystem.com/" target="_blank">機場東</a></li>
<li data-coords="4,6.5"><a href="http://www.dusystem.com/" target="_blank">後瑞</a></li> <!-- marker-only node, moved up by 0.10 -->
<li data-coords="4,7.3"><a href="http://www.dusystem.com/" target="_blank">固戍</a></li>
<li data-coords="4,8"><a href="http://www.dusystem.com/" target="_blank">西鄉</a></li>
<li data-coords="4,8.5" ><a href="http://www.dusystem.com/" target="_blank">坪洲</a></li>
<li data-coords="4,9.5" ><a href="http://www.dusystem.com/" target="_blank">寶體</a></li>
<li data-coords="4,10" data-marker="@station"><a href="http://www.dusystem.com/" target="_blank">寶安中心</a></li>
<li data-coords="4,10.5" ><a href="http://www.dusystem.com/" target="_blank">新安</a></li>
<li data-coords="4,11" data-dir="E" data-marker="station" data-labelPos="E"><a href="http://www.dusystem.com/" target="_blank">前海灣</a></li>
<li data-coords="4.5,11" ><a href="http://www.dusystem.com/" target="_blank">鯉魚門</a></li>
<li data-coords="5,11" ><a href="http://www.dusystem.com/" target="_blank">大新</a></li>
<li data-coords="5.5,11" ><a href="http://www.dusystem.com/" target="_blank">桃園</a></li>
<li data-coords="6,11" ><a href="http://www.dusystem.com/" target="_blank">深大</a></li>
<li data-coords="6.5,11" ><a href="http://www.dusystem.com/" target="_blank">高新園</a></li>
<li data-coords="7,11"><a href="http://www.dusystem.com/" target="_blank">白石洲</a></li>
<li data-coords="7.5,11" data-marker="station" data-markerInfo="h5"><a href="http://www.dusystem.com/" target="_blank">世界之窗</a></li>
<li data-coords="8,11" ><a href="http://www.dusystem.com/" target="_blank">華僑城</a></li>
<li data-coords="9,11" ><a href="http://www.dusystem.com/" target="_blank">僑城東</a></li>
<li data-coords="9.5,11" ><a href="http://www.dusystem.com/" target="_blank">竹子林</a></li>
<li data-coords="10.2,11" ><a href="http://www.dusystem.com/" target="_blank">車公廟</a></li>
<li data-coords="11,11" ><a href="http://www.dusystem.com/" target="_blank">香蜜湖</a></li>
<li data-coords="11.5,11" ><a href="http://www.dusystem.com/" target="_blank">購物公園</a></li>
<li data-coords="12.5,11" ><a href="http://www.dusystem.com/" target="_blank">會展中心</a></li>
<li data-coords="13.5,11" ><a href="http://www.dusystem.com/" target="_blank">崗廈</a></li>
<li data-coords="14.5,11" ><a href="http://www.dusystem.com/" target="_blank">華強路</a></li>
<li data-coords="15,11"><a href="http://www.dusystem.com/" target="_blank">科學</a></li>
<li data-coords="15.3,10.4" ><a href="http://www.dusystem.com/" target="_blank">館大劇院</a></li>
<li data-coords="15.6,9.8" ><a href="http://www.dusystem.com/" target="_blank">老街</a></li>
<li data-coords="15.6,12" ><a href="http://www.dusystem.com/" target="_blank">國貿</li>
<li data-coords="15.6,13" data-marker="interchange"><a href="http://www.dusystem.com/" target="_blank">羅湖</a></li>
</ul>
<ul data-color="#000000" data-label="蛇口線(3號線)">
<li data-coords="4.1,16.5" data-marker="@interchange"><a href="http://www.dusystem.com/">赤灣</a></li>
<li data-coords="4.4,16"><a href="http://www.dusystem.com/">蛇口港</a></li>
<li data-coords="4.7,15.5"><a href="http://www.dusystem.com/">海上世界</a></li>
<li data-coords="5.0,15"><a href="http://www.dusystem.com/">水灣</a></li>
<li data-coords="5.3,14.5"><a href="http://www.dusystem.com/">東角頭</a></li>
<li data-coords="5.6,14"><a href="http://www.dusystem.com/">灣廈</a></li>
<li data-coords="5.9,13.5"><a href="http://www.dusystem.com/">海月</a></li>
<li data-coords="6.2,13"><a href="http://www.dusystem.com/">登良</a></li>
<li data-coords="6.5,12.5"><a href="http://www.dusystem.com/">後海</a></li>
<li data-coords="6.8,12"><a href="http://www.dusystem.com/">科苑</a></li>
<li data-coords="7.2,11.5"><a href="http://www.dusystem.com/">紅樹灣</a></li>
<li data-coords="7.5,11"><a href="http://www.dusystem.com/" target="_blank"></a></li>
<li data-coords="7.5,10.4"><a href="http://www.dusystem.com/">僑城北</a></li>
<li data-coords="8.5,10.4"><a href="http://www.dusystem.com/">深康</a></li>
<li data-coords="9,10.4"><a href="http://www.dusystem.com/">安托山</a></li>
<li data-coords="9.5,10.4"><a href="http://www.dusystem.com/">僑香</a></li>
<li data-coords="10,10.4"><a href="http://www.dusystem.com/">香蜜</a></li>
<li data-coords="10.5,10.4"><a href="http://www.dusystem.com/">香蜜北</a></li>
<li data-coords="11,10.4"><a href="http://www.dusystem.com/">景田</a></li>
<li data-coords="11.5,10.4"><a href="http://www.dusystem.com/">蓮花北</a></li>
<li data-coords="12,10.4"><a href="http://www.dusystem.com/">福田</a></li>
<li data-coords="12.5,10.4"><a href="http://www.dusystem.com/">市民中心</a></li>
<li data-coords="13,10.4"><a href="http://www.dusystem.com/">崗廈北</a></li>
<li data-coords="13.5,10.4"><a href="http://www.dusystem.com/">华强北</a></li>
<li data-coords="14,10.4"><a href="http://www.dusystem.com/">燕南</a></li>
<li data-coords="15.3,10.4"><a href="http://www.dusystem.com/"></a></li>
<li data-coords="15.8,10.4"><a href="http://www.dusystem.com/">湖貝</a></li>
<li data-coords="16.5,10.4"><a href="http://www.dusystem.com/">黃貝嶺</a></li>
<li data-coords="17,10.4" data-marker="interchange"><a href="http://www.dusystem.com/">新秀</a></li>
</ul>
</div>
<div id="legend"></div>
<script type="text/javascript">
$(".subway-map").subwayMap({ debug: true });
</script>
</body>
</html>
html5 程序显示的深圳地铁罗宝线