Google地图中单个国家的多处出现 [英] mutiple occurance of single country in google map

问题描述

我对Google地图使用 geocomplete 插件来加载Google地图.当我加载美国"地图时，它会在地图中多次出现.我认为这可能与地图画布的大小有关.我该如何解决?我在gmap3中也遇到了同样的问题，并直接使用了Google Map API.

I use geocomplete plugin for the google map to load the map. When i load the map of "United States" it occur more than once in the map. I think it probably related to size of the map canvas. How could i solve it? I have also this same problem in gmap3, and direct use of google map API.

推荐答案

您可以通过两种方式隐藏"重复的区域:

You can "hide" the repeated areas in two manners:

我更喜欢随着缩放的变化调整div的大小.缺点是，如果您将地图居中放置(我认为它看起来更好)，则地图控件会四处移动，并且缩放无法像固定大小的地图中那样可预测

I prefer resizing the div as the zoom changes. The drawback is that if you keep the map centered (which I think looks better) the map control moves around and zooming is not predictable like in a fixed-size map

这里是一个演示: 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放置在正确的位置，并在缩放级别较低时启用其可见性.缺点是要保持地图居中，地图控件会被完全覆盖

Second option, place invisible divs in the right place and enable their visibility when the zoom level is low. The drawback is that to keep the map centered, the map controls are covered completely

  #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";
      }
    });

这篇关于Google地图中单个国家的多处出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！