Question

我编写了一个函数，该函数通过将lat长点转换为div内地图上的x，y来创建自定义地图。地图本身包含在div的背景中，并且这些点在顶部是SVG元素，这允许这些点是交互式的，但地图是静态的。

它现在的工作方式是每个元素都有一个id，并且cx和cy由程序员输入为坐标。在文档的部分中，有一个包含每个点的ID的数组。该程序使用.forEach在数组中运行，获取cx和cy值，进行一些数学运算，然后更改cx和cy值以将点正确放置在地图上（请参见文档底部的代码）。

这很好用，但是我想知道是否有更“优雅”的方式来做到这一点。原来的代码不是很用户友好，您必须仔细检查每个点的ID，并在每次添加新点时更新数组。我知道这是一种笨拙的系统。有没有办法做到这一点，例如，告诉脚本为每个具有特定类onload的元素运行？

以下代码：

#window {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/World_map_%28Miller_cylindrical_projection%2C_blank%29.svg/634px-World_map_%28Miller_cylindrical_projection%2C_blank%29.svg.png);
  display: block;
  filter: none;
  background-color: #E3F2FD;
  transition: .5s;
}

<html>

<head>
  <link rel="stylesheet" href="pagestyle.css">
</head>

<body>
  <div id="window">
    <svg id="pins" viewBox="0 0 637.5 336.4">
              
                <circle class="pin" id="md" cx="-76.609" cy="39.291" r=".25%" fill="#000"/>
                <circle class="pin" id="ma" cx="-72.609" cy="42.371" r=".25%" fill="#000"/>
                <circle class="pin" id="nd" cx="-97.032" cy="40.714" r=".25%" fill="#000"/>
                <circle class="pin" id="tx1" cx="-94.741" cy="47.924" r=".25%" fill="#000"/>
                <circle class="pin" id="tx2" cx="-97.149" cy="32.501" r=".25%" fill="#000"/>
        
                <text id="tooltip" x="0" y="0" visibility="hidden" fill="#000" stroke="#000" font-size="10" font-family="Arial">Tooltip</text>
              </svg>
  </div>
  <script>
    //mapping function
    var users = [md, ma, nd, tx1, tx2];
    users.forEach(function(element) {
      var lon = parseInt(element.getAttribute("cx"));
      var xValue = (637.5 * ((lon + 180) / 360))-14;
      element.setAttribute("cx", xValue);
      var lat = parseInt(element.getAttribute("cy"));
      var yValue = (474.691 * ((Math.abs((((5 / 4) *
        (Math.asinh(Math.tan(((4 * Math.PI) / 900) * lat)))) + 2.30342) - 4.60684)) / 4.60684)) ;
      element.setAttribute("cy", yValue);
    });
  </script>
</body>

</html>

更新：在我的笔记本电脑上添加了一个在线来源而不是本地来源的背景网址，并更改了x和y偏移以匹配新地图

Answer 1

如果您想在加载时重画圆，我将按以下方式修改您的代码

document.body.onload = function(){
  var users = document.getElementsByClassName('pin');

  for (var i = 0; i < users.length; i++) {
       var element = users[i]
       var lon = parseInt(element.getAttribute("cx"));
       var xValue = (637.5 * ((lon + 180) / 360)) - 22;
       element.setAttribute("cx", xValue);
       var lat = parseInt(element.getAttribute("cy"));
       var yValue = (474.691 * ((Math.abs((((5/4) * (Math.asinh(Math.tan(((4*Math.PI)/900) * lat)))) + 2.30342) - 4.60684)) / 4.60684)) - 35;
       element.setAttribute("cy", yValue);
   }
}

在Java中将经纬度长点列表映射到x，y：是否有一种更简洁的方法？

1 个答案: