javascript google map放大到零时为空白灰色背景

Question

我在混合Webview应用程序中使用google map javascript。当我缩小地图直到0时，它将显示灰色区域，而地图图块将位于屏幕中央。

我有什么办法可以解决这个问题，以避免出现灰色区域？

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

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

MinZoom默认值

MinZoom 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以应用仅纬度限制。

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>