为什么 Google Maps .getCenter() 返回无效坐标?
Why is Google Maps .getCenter() returning invalid coordinates?
在一个拥有来自世界各地用户的流量相对较高的网站上,从昨天(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()
}
})
});
这已经工作了很多年没有问题。但是昨天我们开始收到无效的 lat/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 问题。
我希望有人可以帮助阐明这一点,或者这可能会帮助处于类似情况的其他人。
API 的 3.35 和 3.36 版本的 getCenter
方法似乎存在问题。版本 3.34 工作正常。
我无法获得超过 90 的纬度值,但只需将地图向左或向右(沿一个方向)平移几次即可显示 经度值超出 -180 / 180 度范围.
我开了一个bug report in the issue tracker.
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" />
我检查了版本 3.35 和 3.36 并且
似乎 getCenter() 没有按照这个 doc 包装,但在 v 3.34 中没有发生。
这 issue 也发生在去年 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" />
我必须执行此功能才能修补 Google 地图错误:
const fixCoordinates = (coordinate: number) => {
let fixedCoordinate = coordinate;
while (fixedCoordinate > 180) fixedCoordinate -= 360;
while (fixedCoordinate < -180) fixedCoordinate += 360;
return fixedCoordinate;
};
在一个拥有来自世界各地用户的流量相对较高的网站上,从昨天(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()
}
})
});
这已经工作了很多年没有问题。但是昨天我们开始收到无效的 lat/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 问题。
我希望有人可以帮助阐明这一点,或者这可能会帮助处于类似情况的其他人。
API 的 3.35 和 3.36 版本的 getCenter
方法似乎存在问题。版本 3.34 工作正常。
我无法获得超过 90 的纬度值,但只需将地图向左或向右(沿一个方向)平移几次即可显示 经度值超出 -180 / 180 度范围.
我开了一个bug report in the issue tracker.
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" />
我检查了版本 3.35 和 3.36 并且 似乎 getCenter() 没有按照这个 doc 包装,但在 v 3.34 中没有发生。
这 issue 也发生在去年 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" />
我必须执行此功能才能修补 Google 地图错误:
const fixCoordinates = (coordinate: number) => {
let fixedCoordinate = coordinate;
while (fixedCoordinate > 180) fixedCoordinate -= 360;
while (fixedCoordinate < -180) fixedCoordinate += 360;
return fixedCoordinate;
};