javascript - 为什么 Google Maps .getCenter() 返回无效坐标？

Question

在一个拥有来自世界各地用户的相对较高流量的网站上，从昨天（2/13/2019）开始，在世界标准时间下午 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 问题。

我希望有人可以帮助阐明这一点，或者这可能会帮助处于类似情况的其他人。

标签： javascriptgoogle-mapsgoogle-maps-api-3mobile-safariuser-agent

Answer 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" />