JavaScript纬度和经度到自定义地图上的像素

Question

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

您可以看到一个单击此处的演示。红色子弹应该是罗马，绿色应该是里约热内卢。两者都不是应该的位置，"错误的偏移"从标记到标记并不总是相同的（换句话说：添加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>

Answer 1

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

假设您正在使用Mercador投影（对我来说看起来像它）。

详细答案中的伪代码

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

Answer 2

因此，仅适用于为这个问题而苦苦挣扎的任何人，我只是忽略了地图图像的大小和绘制。使用有效的Mercator投影图修复了所有内容，这里有一些示例

感谢大家帮助我理解！