Javascript широта и долгота в пикселях на пользовательской карте

Question

У меня есть список магазинов, описанных их координатами (широта, долгота), и мне нужно проанализировать их на моей пользовательской карте мира как маркеры (с абсолютным позиционированием css).Карта Google и другие библиотеки (карта jVector и аналогичные) не являются решением проблемы.Я нашел некоторые формулы для преобразования значений широты / долготы в пиксели влево / вправо, которые будут использоваться для маркеров, но преобразование кажется не точным.

Вы можете увидеть демонстрацию, нажав здесь .Красной пулей должен быть Рим, а зеленой - Рио-де-Жанейро.Оба находятся не там, где должны быть, и «неправильное смещение» не всегда одинаково от маркера к маркеру (другими словами: добавление 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

Итак, для всех, кто боролся с этой проблемой, проблема заключалась в том, что я просто игнорировал то, как должно быть измерено и нарисовано изображение карты.Использование корректной карты проекции меркатора исправило все, вот несколько примеров

спасибо, ребята, что помогли мне понять это!

Answer 2

Ваши очки неточны, потому что ваша формула не учитывает, что Земля не является плоской плоскостью.

Предполагается, что вы используете проекцию Меркадора (похоже, мне).

псевдокод из подробного ответа

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