google-maps - 谷歌地图中单个国家多次出现

Question

我使用谷歌地图的地理完整插件来加载地图。当我加载“美国”的地图时，它在地图中出现了不止一次。我认为这可能与地图画布的大小有关。我该如何解决？我在 gmap3 中也有同样的问题，直接使用谷歌地图 API。

Answer 1

您可以通过两种方式“隐藏”重复区域：

我更喜欢随着缩放的变化调整 div 的大小。缺点是，如果您保持地图居中（我认为这看起来更好），地图控件会四处移动，并且无法像在固定大小的地图中那样进行缩放

这是一个演示：http: //jsbin.com/eyehaz/3/edit#preview

  var map;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };
  var widths = ["256px", "512px", "1024px", "100%"];

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    google.maps.event.addListener(map, 'zoom_changed', function() {
      zoom = map.getZoom();
      if (zoom < 4) {
        document.getElementById("map_canvas").style.width = widths[zoom];
      }
      else {
        document.getElementById("map_canvas").style.width = widths[3]; 
      }
      google.maps.event.trigger(map, "resize");
    });
  }

第二个选项，将不可见的 div 放置在正确的位置，并在缩放级别较低时启用它们的可见性。缺点是为了保持地图居中，地图控件被完全覆盖

  #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 }

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

Answer 2

此行为是设计使然。似乎在 API 版本 3 中无法限制地图的水平重复。

您认为地图的大小是正确的：因为大小和缩放级别允许地图的多个实例，所以显示的实例不止一个。每个副本都有一个标记。