javascript google 缩放到零时映射空白灰色背景

Question

我正在为我的混合网络视图应用程序使用 google 地图 javascript。当我将地图缩小到 0 时，它会显示灰色区域，而地图块将位于屏幕中央。

有什么办法可以解决此问题以避免出现灰色区域吗？

我试过使用地图图块图像作为背景，但移动地图时会很明显。我也尝试将 minZoom 设置为 2，但如果我滚动地图，灰色区域仍然可见。

或者当缩放为“2”时是否可以防止滚动地图区域？

默认最小缩放

最小缩放 2

我也试过下面的方法，但是缩小后，它不允许我再放大。

google.maps.event.addListener(map, 'zoom_changed', function(){
    map.setOptions({draggable: ((map.getZoom() < 3) ? false : true)});
});

还有这个，但是没有调用 else 语句。

google.maps.event.addListener(map, 'zoom_changed', function(){
        if(map.getZoom() < 3){
            document.getElementById('mapCanvas').setAttribute("style", "pointer-events: none;"); 
        }else{
            document.getElementById('mapCanvas').removeAttribute("style"); 
        }
    });

Answer 1

你可以找到地图的real north and south edges

然后使用 MapRestriction 来防止地图平移到定义区域之外。

将计算结果应用于限制的north和south参数。设置 west: -180 和 east: 180 以仅应用纬度限制。

设置 strictBounds: true 以严格限制给定范围，即使在缩小时也是如此。

function initMap() {

  var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;
  var myLatLng = new google.maps.LatLng(-24, 123);
  var mapOptions = {
    zoom: 2,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    restriction: {
      latLngBounds: {north: maxLat, south: -maxLat, west: -180, east: 180},
      strictBounds: true
    },
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

#map-canvas {
  height: 110px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

javascript google 缩放到零时映射空白灰色背景

javascript google map empty gray background when zoomed to zero

css

google-maps

google-maps-api-3

maps

tile