自定义地图上像素的Javascript纬度和经度答案

【问题标题】：Javascript latitude and longitude to pixel on custom map自定义地图上像素的Javascript纬度和经度
【发布时间】：2018-12-20 10:07:14
【问题描述】：

我有一个由它们的坐标（纬度、经度）描述的商店列表，我需要在我的自定义世界地图上将它们解析为标记（使用 css 绝对定位）。谷歌地图和其他库（jVector 地图和类似的）不是解决方案。我找到了一些公式将纬度/经度转换为像素左/右值以用于标记，但转换似乎不准确。

你可以看到a demo clicking here。红色的应该是罗马，绿色的应该是里约热内卢。两者都不是应有的位置，并且“错误的偏移量”在标记之间并不总是相同的（换句话说：添加 translateX(-XXpx) 不会解决所有问题）。

显然我遗漏了一些东西，我很确定我应该以某种我不知道也不理解的方式设置地图图像。有人可以帮忙吗？

先谢谢了，下面是演示的相关代码：

<div id="map" style="width: 800px;margin:100px;auto;position:relative;background-color:#dedede;">
    <img src="map.svg" style="width:100%;">
</div>
<script>
    var map = document.getElementById('map');
    var stores = [
        {
            "name": "Rome",
            "n": 10,
            "lat": 41.9097306,
            "lng": 12.2558141,
            "fill": "red"
        },
        {
            "name": "Rio di Janeiro",
            "n": 5,
            "lat": -22.9138851,
            "lng": -43.7261746,
            "fill": "green"
        }
    ];
    stores.forEach(element => {
        var pos = coordToPixel(element.lat,element.lng);
        var marker = document.createElement('div');
        marker.className = 'marker';
        marker.style.left = pos.x+'px';
        marker.style.top = pos.y+'px';
        marker.style.backgroundColor = element.fill;
        map.appendChild(marker);
    });
    function coordToPixel(lat,lng)
    {
        var MAP_WIDTH = 800,
            MAP_HEIGHT = 444
            ;
        var x = ((lng+180)*MAP_WIDTH/360),
            y = ((90-lat)*MAP_HEIGHT/180)
            ;
        return {x,y}
    }
</script>

【问题讨论】：

您是否考虑过实际的经纬度可能有误。因为我发现罗马和里约的经纬度不同。看看谷歌。它们是不同的，但我认为这不会导致距离那么远。
感谢 Lloyd，但 lat long 似乎是正确的：我拿了一张谷歌地图，这是罗马的链接，你可以在 url 中看到 lat ang long：google.com/maps/place/Roma+RM/@41.9097306,12.2558141,10z/…
我不确定，但如果我应该赌一分钱，我会说地图应该从特定的纬度/经度开始“绘制”到特定的纬度/经度到保持正确的比例准确。但我找不到任何帮助
我建议使用另一张墨卡托图像，例如 google.com/…
感谢 Lloyd，我选择了其中一个，它可以工作。而且，最重要的是，我知道该对将重新绘制地图的图形人员说些什么，再次感谢！

标签： javascript html css maps

【解决方案1】：

您的观点不准确，因为您的公式没有考虑到地球不是平面。

假设您正在使用 mercador 投影（在我看来很像）。

伪代码来自详细answer

latitude    = 41.9097306;
longitude   = 12.2558141;

mapWidth    = 800;
mapHeight   = 444;

// get x value
x = (longitude+180)*(mapWidth/360)

// convert from degrees to radians
latRad = latitude*PI/180;

// get y value
mercN = ln(tan((PI/4)+(latRad/2)));
y     = (mapHeight/2)-(mapWidth*mercN/(2*PI));

【讨论】：

感谢 tandrieu，您发布的公式是我尝试过的许多其他公式之一。现在我用那个公式更新了演示链接，标记移动了一点，但它们仍然是错误的。
这个问题可以解决地图图像吗？我看到墨卡托项目地图的中心不同，比例也不同
如果您的图像不是有效的墨卡托投影，那很可能是问题所在。您应该尝试使用有效的或找到您的地图“投影”并相应地更改公式

【解决方案2】：

所以，对于任何在这个问题上苦苦挣扎的人来说，问题是我只是忽略了应该如何调整地图图像的大小和绘制方式。使用有效的墨卡托投影图修复了所有问题，here are some examples

感谢大家帮助我理解这一点！

【讨论】：