【问题标题】:How to block google maps api v3 panning in the gray zone over north pole or under south pole?如何阻止谷歌地图 api v3 在北极上方或南极下方的灰色区域平移?
【发布时间】:2014-06-28 03:37:26
【问题描述】:

使用 google maps v3 javascript API 我找不到阻止地图在北极上方或南极下方平移的方法。 作为此页面上的示例嵌入地图: https://developers.google.com/maps/documentation/embed/guide 具有相同的行为,缩小世界视图并向北平移会将视图带入一个完全灰色的区域。

如何防止像官方网站http://maps.google.it做的那样?

【问题讨论】:

标签: javascript google-maps google-maps-api-3


【解决方案1】:

更新 - 以下答案看起来不再有效,我想这是因为谷歌地图 API 已经升级。我将代码留在这里以供参考。

感谢 geocodezip cmets 我为我的案例修改了 Mike Williams 的解决方案。

这里是fiddle example

相关代码部分:

google.maps.event.addListener(map, 'center_changed', function() {
    checkBounds(map);
});
// If the map position is out of range, move it back
function checkBounds(map) {

var latNorth = map.getBounds().getNorthEast().lat();
var latSouth = map.getBounds().getSouthWest().lat();
var newLat;

if(latNorth<85 && latSouth>-85)     /* in both side -> it's ok */
    return;
else {
    if(latNorth>85 && latSouth<-85)   /* out both side -> it's ok */
        return;
    else {
        if(latNorth>85)   
            newLat =  map.getCenter().lat() - (latNorth-85);   /* too north, centering */
        if(latSouth<-85) 
            newLat =  map.getCenter().lat() - (latSouth+85);   /* too south, centering */
    }   
}
if(newLat) {
    var newCenter= new google.maps.LatLng( newLat ,map.getCenter().lng() );
    map.setCenter(newCenter);
    }   
}

【讨论】:

  • 谁也想知道为什么是 85,请参阅latlongrid.gif。海报试图将视口限制在 85 度以内。
  • 这不起作用(尝试了上面的小提琴)。根据日志,我的猜测是 Google 停止传递实际值(例如,-100 等),而是传递模数(或类似值)。
  • 另外,这个问题似乎发生在生产中;即,大公司也有同样的问题(例如:foodora)。但是,maps.google.com 没有问题。
【解决方案2】:

使用“限制”属性为我工作:

new google.maps.Map(document.getElementById('#mapCanvas'), {
  zoom: 2,
  center: {lat: 0, lng: 0},
  tilt: 0,
  restriction: {
    latLngBounds: {north: 85, south: -85, west: -180, east: 180},
    strictBounds: true
  },
});

【讨论】:

  • 试过了,但它是水平平移而垂直方向很好
  • 出于某种原因,同样{ north: 90, south: -90 } 不能垂直工作,{ west: -180, east: 180 } 不能水平工作。所以{ north: 85, south: -85, west: -175, east: 175 } 为我工作
猜你喜欢
  • 1970-01-01
  • 2017-12-14
  • 1970-01-01
  • 2015-12-17
  • 1970-01-01
  • 2012-02-23
  • 2012-05-03
  • 2018-10-02
  • 2016-10-26
相关资源
最近更新 更多