为什么Google Maps .getCenter()返回无效坐标?

时间:2019-02-14 12:11:02

标签: javascript google-maps google-maps-api-3 mobile-safari user-agent

从昨天(2/13/2019)开始,在一个来自世界各地的用户流量相对较高的站点上,UTC大约下午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问题。

我希望有人可以对此有所帮助,或者这可能会帮助处于类似情况的其他人。

3 个答案:

答案 0 :(得分:2)

API {strong>版本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" />

答案 1 :(得分:2)

我检查了版本3.35和3.36以及 似乎没有按照此doc包装getCenter(),但在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" />

答案 2 :(得分:0)

我必须执行此功能才能修补Google Maps错误:

const fixCoordinates = (coordinate: number) => {
  let fixedCoordinate = coordinate;
  while (fixedCoordinate > 180) fixedCoordinate -= 360;
  while (fixedCoordinate < -180) fixedCoordinate += 360;
  return fixedCoordinate;
};