Javascript 在java中，将lat，long点列表映射到x，y：有更干净的方法吗？

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

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

这很好，但我想知道是否有一个更“优雅”的方式来做到这一点。目前的代码对用户不是很友好，每次添加一个新点时，必须仔细检查并为每个点提供一个id，并更新数组。我认识到这是一种笨重的系统。有没有一种方法可以做到这一点，例如，告诉脚本为每个元素运行一个特定的类onload

代码如下：

窗口{ 背景图像：urlhttps://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/World_map_%28Miller_cylindrical_projection%2C_blank%29.svg/634px-世界地图%28Miller\u圆柱投影%2C\u空白%29.svg.png； 显示：块； 过滤器：无； 背景色：E3F2FD； 过渡：.5s； } 工具提示 //映射函数 var用户=[md、ma、nd、tx1、tx2]； users.forEachfunctionelement{ var lon=parseIntelement.getAttributecx； var xValue=637.5*lon+180/360-14； element.setAttributecx，xValue； var lat=parseIntelement.getAttributecy； 变量Y值=474.691*Math.abs5/4* Math.asinhMath.tan4*Math.PI/900*lat+2.30342-4.60684/4.60684； element.setAttributecy，yValue； };

---

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

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);
   }
}

---

你把ak，md…放在哪里？迪纳摩-不知道你的意思。lat、long点被设置为svg元素的原始位置属性。JS获取这些值并重新处理它们。你能解释一下这有什么改进吗？例如，这仍然需要使用一个数组来包含所有ID。据我所知，只是添加了一个额外的步骤，我不清楚为什么。