问题描述
从昨天（2019 年 2 月 13 日）开始，在世界各地的用户流量相对较高的网站上，在世界标准时间下午 5 点左右，我们开始收到带有无效坐标的 AJAX 回调。
我们有 Javascript 来检测地图何时空闲，然后将坐标发送到我们的服务器以进行反向地理编码器查找。 这是一个简化：
google.maps.event.addListener(mapObject, 'idle', function() {
$.ajax({
url: '/geo/reverse/lookup',
type: 'GET',
dataType: 'json',
data: {
lat: mapObject.getCenter().lat(),
lng: mapObject.getCenter().lng()
}
})
});
这已经工作了很多年没有问题。
但是昨天我们开始收到无效的纬度/经度坐标。
这导致我们用来运行反向地理编码器查找的系统抱怨。
大多数无效坐标包含大于180经度值。
我们无法在内部重现该问题。
但我有一种预感，这与浏览器有关。
也许发布了一个新的浏览器版本，它以不同的方式处理 Gmaps JS。
所以我们开始查看不良请求的用户代理。
大多数浏览器都报告代理Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1但并非所有请求都是Mobile Safari 所以我不确定这是浏览器还是 Gmaps 问题。
我希望有人可以帮助阐明这一点，或者这可能会帮助处于类似情况的其他人。
1楼
API版本 3.35 和 3.36的getCenter方法似乎存在问题。
版本 3.34 工作正常。
我无法获得超过 90 的纬度值，但只需将地图向左或向右（在一个方向）平移几次，就会显示超出 -180 / 180 度范围的经度值。
我打开了一个。
function initialize() { var myLatLng = new google.maps.LatLng(46.2,6.17); var mapOptions = { zoom: 2, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); google.maps.event.addListener(map, 'idle', function() { document.getElementById('lat').value = map.getCenter().lat(); document.getElementById('lng').value = map.getCenter().lng(); }); } initialize();
body { font-family: Arial; font-size: 10px; } #map-canvas { height: 150px; margin-bottom: 10px; }
<div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?v=3.36&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> Lat: <input id="lat" type="text" /> Lng: <input id="lng" type="text" />
这是与版本 3.34相同的代码，它可以正常工作：
function initialize() { var myLatLng = new google.maps.LatLng(46.2,6.17); var mapOptions = { zoom: 2, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); google.maps.event.addListener(map, 'idle', function() { document.getElementById('lat').value = map.getCenter().lat(); document.getElementById('lng').value = map.getCenter().lng(); }); } initialize();
body { font-family: Arial; font-size: 10px; } #map-canvas { height: 150px; margin-bottom: 10px; }
<div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?v=3.34&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> Lat: <input id="lat" type="text" /> Lng: <input id="lng" type="text" />
2楼
我必须执行此功能以修补 Google 地图错误：
const fixCoordinates = (coordinate: number) => {
let fixedCoordinate = coordinate;
while (fixedCoordinate > 180) fixedCoordinate -= 360;
while (fixedCoordinate < -180) fixedCoordinate += 360;
return fixedCoordinate;
};
3楼
我检查了 3.35 和 3.36 版，似乎 getCenter() 没有按照此包装，但在 v 3.34 中没有发生。
这个也发生在 2011 年。
function initialize() { var myLatLng = new google.maps.LatLng(46.2,6.17); var mapOptions = { zoom: 2, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); google.maps.event.addListener(map, 'idle', function() { // document.getElementById('lat').value = map.getCenter().lat(); // document.getElementById('lng').value = map.getCenter().lng(); var center = map.getCenter(); var wrapped = new google.maps.LatLng(center.lat(), center.lng()); document.getElementById('lat').value = wrapped.lat(); document.getElementById('lng').value = wrapped.lng(); }); } initialize();
body { font-family: Arial; font-size: 10px; } #map-canvas { height: 150px; margin-bottom: 10px; }
<div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?v=3.36&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> Lat: <input id="lat" type="text" /> Lng: <input id="lng" type="text" />