编辑讨论页面历史

模板:铁路：修订间差异

小无编辑摘要
小无编辑摘要
第2行： 第2行：


<body>
<body>
     <div id="MainMap"></div>
    <style>
        .pop {
            box-shadow: 0px 0px 10px -1px #c9c9c9;
            background: #FFF;
            width: 200px;
            min-height: 40px;
            border-radius: 7px;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity .2s;
            pointer-events:none;
            opacity: 0;
            overflow: hidden;
        }
        .pop > div:first-child {
            height: 30px;
            background: #4188F1;
            line-height: 30px;
            padding: 0 10px;
            color: #fff;
            font-weight: bold;
            font-size: 0.9rem;
        }
        .pop > div:last-child {
            padding: 5px 10px;
            display: flex;
            flex-direction: column;
        }
        .pop > div:last-child > span {
            font-size: 0.8rem;
        }
    </style>
     <div id="MainMap">
        <div id="pop" class="pop">
            <div></div>
            <div></div>
        </div>
    </div>
     <script>
     <script>
         window.dataset = {
         window.dataset = {
第451行： 第489行：
                 const point = document.createElementNS('http://www.w3.org/2000/svg','circle')
                 const point = document.createElementNS('http://www.w3.org/2000/svg','circle')
                 point.dataset.raw = station.pos
                 point.dataset.raw = station.pos
                point.dataset.data = JSON.stringify(station)
                 point.setAttribute("cx", 50 + (Number(x) / size * 50) + "%")
                 point.setAttribute("cx", 50 + (Number(x) / size * 50) + "%")
                 point.setAttribute("cy", 50 - (Number(y) / size * 50) + "%")
                 point.setAttribute("cy", 50 - (Number(y) / size * 50) + "%")
第459行： 第498行：
                 point.style.strokeWidth = "0.2rem"
                 point.style.strokeWidth = "0.2rem"


                 point.onmouseover = function()  { onPointOver(point)   }
                 point.onmouseover = function()  { onPointOver(event, point)     }
                 point.onmouseleave = function() { onPointLeace(point)   }
                 point.onmouseleave = function() { onPointLeace(point)           }


                 // <text x="0" y="15" fill="red">I love SVG</text>
                 // <text x="0" y="15" fill="red">I love SVG</text>
第527行： 第566行：


         // 站点悬停事件
         // 站点悬停事件
         function onPointOver(sender) {
         function onPointOver(event, sender) {
            const pop = document.getElementById("pop")
            // 处理元素
             sender.style.r = "1px"
             sender.style.r = "1px"
             sender.style.strokeWidth = "1rem"
             sender.style.strokeWidth = "1rem"
            pop.style.opacity = "1"
            // 获取鼠标位置
            const x = event.clientX
            const y = event.clientY
            // 移动 div
            pop.style.top = y + "px"
            pop.style.left = (x + 10) + "px"
            // 填充信息
            pop.children[1].innerHTML = ""
            const info = JSON.parse(sender.dataset.data)
            pop.children[0].innerText = info.label
            let span = document.createElement("span")
            span.innerText = "所属：" + info.user
            pop.children[1].append(span)
            span = document.createElement("span")
            span.innerText = "坐标：" + info.point
            pop.children[1].append(span)
         }
         }
         function onPointLeace(sender) {
         function onPointLeace(sender) {
            const pop = document.getElementById("pop")
            // 处理元素
             sender.style.r = "0.5rem"
             sender.style.r = "0.5rem"
             sender.style.strokeWidth = "0.2rem"
             sender.style.strokeWidth = "0.2rem"
            pop.style.opacity = "0"
         }
         }
     </script>
     </script>

2022年6月23日 (四) 05:11的版本


用法

你需要传入一些参数，包括：

  • 宽度：地图的显示宽度，可以是任何有效的 html 单位。默认 100%。
  • 高度：地图的显示高度，可以是任何有效的 html 单位。默认 unset。
  • 缩放：缩放级别，数值越小缩放越大。默认 900。
  • 线路：只显示某条线路。默认 undefined。

例子

因为设计原因，此模板无法在同一个页面上加载两次。 

{{铁路|宽度=50%|缩放=700|线路=1}}


关于增加站点

你可以在代码开头参数列表中添加站点，在站点列表内添加你的站点并根据和主城（0, 0）的相对关系设置距离坐标。在添加完毕后将站点添加到线路列表内即可。 如果搞不明白可以叫管理（小声