AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2013-01-14 1544
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 深圳地鐵羅寶線和蛇口線示例：見上圖。 要求瀏覽器版本：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:   /

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

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


文章标签：
前端开发
JavaScript
移动开发
HTML5
Web App开发
关键词：
HTML jQuery
HTML示例
html5 jQuery
Map示例
jQuery示例
geovindu
目录
相关文章
1024小神
|
4月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
1024小神
50 1
吃番茄长大的西红柿
|
3月前
|
Ubuntu C++ Docker
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
吃番茄长大的西红柿
44 1
听白
|
8天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
听白
14 0
VipSoft
|
1月前
|
JSON JavaScript 数据格式
html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
VipSoft
27 0
好奇的菜鸟
|
3月前
|
前端开发 JavaScript
HTML 全局属性介绍及示例
HTML 全局属性介绍及示例
好奇的菜鸟
30 2
好奇的菜鸟
|
3月前
HTML表格的跨行与跨列：《红楼梦》人物与小学课表示例
HTML表格的跨行与跨列：《红楼梦》人物与小学课表示例
好奇的菜鸟
20 1
G佳伟
|
2月前
|
JavaScript 前端开发 UED
【源码分享】简单的404 HTML页面示例，该页面在加载时会等待2秒钟，然后自动重定向到首页
【源码分享】简单的404 HTML页面示例，该页面在加载时会等待2秒钟，然后自动重定向到首页
G佳伟
150 0
JavaPub
|
3月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
JavaPub
26 0
JavaPub
|
3月前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
JavaPub
102 0
恰小面包
|
4月前
|
前端开发
HTML代码示例
HTML代码示例
恰小面包
54 1

热门文章

最新文章

  • 1
    Python入门教程：内置函数—Map、Reduce、Filter
  • 2
    List、Map、Set三个接口存取元素时，各有什么特点？
  • 3
    [Map 3D开发实战系列] Map Resource Explorer 之七-- 查看资源内容及资源引用
  • 4
    Java入门记(五)：容器关系的梳理（下）——Map
  • 5
    C++ Internals: STL之Map
  • 6
    AutoCAD Map 3D 2011 Update 2 - Released!
  • 7
    STL map 用法
  • 8
    stl中map的基本用法
  • 9
    Map 3D 2013 新功能和新API WebCast视频下载
  • 10
    对Map的按值排序
  • 1
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    134
  • 2
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    62
  • 3
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    167
  • 4
    【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
    81
  • 5
    【Web 前端】jQuery 库中的 $() 是什么？
    199
  • 6
    jquery获取子元素的一些方法
    41
  • 7
    JQuery的定义
    30
  • 8
    jQuery遍历节点的方法
    28
  • 9
    jQuery方法小记
    39
  • 10
    jQuery手机号抽奖
    69

    • 相关课程

    更多
  • Go语言核心编程 - 基础语法、数组、切片、Map
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • jQuery开发教程

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    搭建自己的私有云盘工具总结