我有一个由坐标(纬度，经度)描述的商店列表，我需要在我的自定义世界地图上解析它们作为标记(使用css绝对定位)。Google map和其他库(jVector map和类似的)不是一个解决方案。我找到了一些公式来将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>