放大到零时，javascript google地图为空的灰色背景 [英] javascript google map empty gray background when zoomed to zero

问题描述

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

Am using google map javascript for my hybrid webview app. When i zoom out map till 0, it will show gray area while map tiles will be on center of the screen.

有什么办法可以解决此问题，以免出现灰色区域?

Is there any way i can fix this to avoid the gray area?

我尝试将地图图块图像用作背景，但是在移动地图时会很明显.我也尝试将minZoom设置为2，但是仍然可以在滚动地图时看到灰色区域.

I have tried using map tile image for background but is noticeable when you move map. I have also tried setting minZoom to 2, but still if i scroll map the gray area will be visible.

还是在缩放为"2"时阻止地图区域滚动?

Or is it possible to prevent scrolling map area when zoom is '2`?

MinZoom默认值

MinZoom 2

我也在下面尝试过，但是缩小后，不允许我放大.

I tried below also but after zooming out, it doesn't allow me to zoom in back.

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

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

And also this, but the else statement doesn't get called.

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

推荐答案

您可以找到 真正的南北边缘 .

You can find the real north and south edges of the map.

然后使用 MapRestriction 防止地图在定义区域之外平移.

Then use a MapRestriction to prevent the map from panning outside the defined area.

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

Apply the calculated result to the north and south parameters of the restriction. Set west: -180 and east: 180 to apply a latitude only restriction.

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

Set strictBounds: true to strictly restrict to the given bounds, even when zooming out.

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地图为空的灰色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！