谷歌地图的动态标记位置不正确-Lat和Long是准确的

Question

使用Google Maps API，我将动态添加地图标记以跟踪我们的2辆车。该网站是用asp.net c#mvc编写的，带有bootstrap 4.3.1，使用ajax请求从我们使用的车辆跟踪器API获取最新的标记位置。地图标记每5分钟更新一次，以显示当前位置。

当在localhost和我们的一个内部服务器上运行应用程序时，标记会准确地显示它们应该显示的位置。现在我已经将网站上传到外部网络服务器，我注意到地图标记不准确，而且总是处于错误的位置。

我有一个屏幕截图，显示了在开发工具中检查的标记，你可以看到标记应该在的位置

查看屏幕截图上的标记和重影位置

我已经检查了标记的数据，在这方面似乎一切都很好，在检查了开发工具中的代码后，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，它与我的地图上显示的位置不同

谷歌地图上使用上述坐标显示的标记位置是我的标记应该显示的位置。

是什么原因导致了这个问题？

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(',', '.')),
},
...
});

希望这能有所帮助！