谷歌地图中多个单一国家的出现

Question

我使用geocomplete插件为谷歌地图加载地图。当我加载“美国”地图时，它在地图中出现不止一次。我认为它可能与地图画布的大小有关。我怎么能解决它？我在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中，无法限制地图的水平重复。

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