HTML5：Subway Map Visualization jQuery Plugin（示例畫深圳地鐵線路圖）

深圳地鐵羅寶線和蛇口線示例：見上圖。

要求瀏覽器版本：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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

/*
 
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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<!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>