Динамические маркеры Google Maps не в правильном положении - Lat и Long точны

Question

Используя API Карт Google, я динамически добавляю маркеры карты для отслеживания 2 наших транспортных средств. Веб-сайт написан на asp.net c # mvc с начальной загрузкой 4.3.1, используя запрос ajax, чтобы получить последнее местоположение маркера изAPI трекера, который мы используем. Маркеры карты обновляются каждые 5 минут, чтобы показать текущее местоположение.

При запуске приложения на локальном хосте и на одном из наших внутренних серверов маркеры отображаются именно там, где и должны. Теперь, когда я загрузил веб-сайт на внешний веб-сервер, я заметил, что маркеры карты не точны и всегда находятся в неправильном положении.

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

См. Положение маркера и призрака на скриншоте

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

Мне удалось воспроизвести проблему в JSFiddle здесь, данные о местоположении были жестко запрограммированы для этой демонстрации;

https://jsfiddle.net/znqo5xaL/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
        <div id="map"></div>
        <script>
            var locs;
            var markersArray = [];
            var map;

            function initMap() {
                locs = [{"lat":"53,5658418","lng":"-0,8491593","distanceList":null},{"lat":"52,8815088","lng":"-2,1409461","distanceList":null}];

                map = new google.maps.Map(
                    document.getElementById('map'),
                    { center: new google.maps.LatLng(54.113616, -1.607444), zoom: 6 });


                for (var i = 0; i < locs.length; i++) {
                    var marker = new google.maps.Marker({
                        position: {lat: parseFloat(locs[i].lat), lng: parseFloat(locs[i].lng)},
                        animation: google.maps.Animation.DROP,
                        map: map,                                      

                    });
                    markersArray.push(marker);
                };

                window.setInterval(function() {loadMarkers(image, map, markersArray, locs)}, 300000);

            }

            function setMarkers(markersArray, map, locs, image) {

                var locArray;

                $.ajax({

                    url:'../Home/UpdateLoc',
                    dataType: "json",
                    type: "GET",
                    contentType: 'application/json; charset=utf-8',
                    cache: true,
                    success: function (data) {

                        locArray = data.locArray;

                        for (var i = 0; i < locArray.length; i++) {
                            var marker = new google.maps.Marker({

                                position: {lat: parseFloat(locArray[i].lat), lng: parseFloat(locArray[i].lng)},
                                animation: google.maps.Animation.DROP,
                                map: map

                            });
                            markersArray.push(marker);
                        };
                    },
                    error: function (xhr) {
                        alert('error');
                    }
                });


            }

            function loadMarkers (image, map, markersArray, locs) {

                var tst = markersArray;

                for (var i=0; i< tst.length; i++) {
                    tst[i].setMap(null);
                }
                setMarkers(markersArray, map, locs, image);
            }

        </script>


        <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>

    </div>

Вы можете видеть, что при поиске местоположения: 53.5658418, 0.8491593 на картах Google, оно находится в другом положении относительно того, что показано на моей карте

Местоположение маркера, отображаемое на картах Google с использованием вышеуказанных координат, - это место, где должен отображаться мой маркер.

Что может быть причиной этой проблемы?

Answer 1

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

Попробуйте выйти из этого:

 console.log("Commas: " + parseFloat(locs[i].lat) + ", " + parseFloat(locs[i].lng));
 console.log("Dots: " + parseFloat(locs[i].lat.replace(',', '.')) + ", " + parseFloat(locs[i].lng.replace(',', '.')));

Вы увидите различные координаты ввыходные данные:

Commas: 53, 0
Dots: 53.5658418, -0.8491593
Commas: 52, -2
Dots: 52.8815088, -2.1409461

Быстрое решение заключается в замене запятых на десятичные точки с использованием replace, как показано в приведенном выше коде, поэтому положение маркера устанавливается следующим образом:

var marker = new google.maps.Marker({
     position: {
        lat: parseFloat(locs[i].lat.replace(',', '.')),
        lng: parseFloat(locs[i].lng.replace(',', '.')),
     },
     ...
});

Надеюсь, это поможет!