google maps API在zoom 1中复制视图

Question

当我尝试使用zoom 1或2来只看到大陆时，我可以多次看到屏幕上的副本，并且大陆在屏幕上重复出现。(屏幕分割为3帧)

我可以在屏幕上控制，只显示一次大陆，而不是重复显示吗？

致以敬意，

Yossi

Answer 1

您所描述的内容是正常的；这是Google地图处理非常低的缩放级别的方式。我也开始我的地图在世界范围内缩放，以显示所有的大陆。另一个因素是用户的屏幕分辨率。我最初的地图缩放级别为3，但有些用户在屏幕分辨率设置较低的情况下，无法在地图第一次加载时看到地图上的所有内容。正因为如此，我现在从zoom 2开始。屏幕分辨率较高的用户只会明白，他们可能会在边缘看到世界地图的复制运行。

Answer 2

编写一个hack！Here's an example for zoom 0 (查看页面时，缩小一次)。

该机制是监听缩放变化，并在低缩放时启用两个绝对定位的灰色div(两边一个)来覆盖“副本”。一张固定宽度的地图实际上是很有必要的。并且您将需要新的div对用于缩放1和2。

最大的缺点是控件被div覆盖了，而且把它们放在中间很难看(我试过了)。您可以只覆盖贴图的右半部分，但效果看起来也不好。(请参阅此处http://jsbin.com/ijojip/3/edit#preview )

    google.maps.event.addListener(map, 'zoom_changed', function() {
      if(map.getZoom() == 0) {
        document.getElementById("leftcover").style.display = "block";
        document.getElementById("rightcover").style.display = "block";
      }
      else {
        document.getElementById("leftcover").style.display = "none";
        document.getElementById("rightcover").style.display = "none";
      }
    });

    #leftcover { position: absolute; height: 100%; background-color: #e5e3df; left: 0px; width: 128px; z-index: 2; display: none }
    #rightcover { position: absolute; height: 100%; background-color: #e5e3df; left: 384px; width: 128px; z-index: 2; display: none }