代码之家 › 专栏 › 技术社区 › phirschybar

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

user-agent mobile-safari geolocation google-maps-api-3 javascript

phirschybar · 技术社区 · 6 年前

从昨天(2019年2月13日)开始,在一个拥有来自世界各地用户的流量相对较高的网站上,大约在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 .

我们无法在内部重现这个问题。但我有预感这和浏览器有关。或许发布了一个新的浏览器版本,它正在以不同的方式处理gmapsjs。所以我们开始研究坏请求的用户代理。大多数浏览器都是报表代理 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

我希望有人能帮助阐明这一点,或者这将有助于其他类似的情况。

0 回复 | 直到 6 年前

MrUpsidown 6 年前

这辆车似乎出了问题 getCenter 方法 版本3.35和3.36 API的一部分。版本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 效果很好:


var mylatng=新建google.maps.LatLng(46.2,6.17);
变量映射选项={
缩放:2,
中心:Mylatng,

var map=新建谷歌地图(文档.getElementById(“地图画布”)、地图选项);

google.maps.event事件.addListener(映射'idle',函数(){

文档.getElementById('lat')。值=地图.getCenter().lat();
});
}

身体{
字体系列:Arial;
}

高度:150px;
边缘底部: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" />

Pagemag 6 年前

我检查了3.35和3.36版本 doc 但在v3.34中没有发生。

issue 去年也发生了。

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

Martin Folmer 4 年前

为了修补Google Maps的bug,我必须执行以下功能:

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