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

2024-05-17 • 问答

我在混合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,function(){
        if(map.getzoom() < 3){
            document.getElementById('mapCanvas').setattribute("style","pointer-events: none;"); 
        }else{
            document.getElementById('mapCanvas').removeAttribute("style"); 
        }
    });

您可以找到地图的 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 map放大到零时为空灰色背景

yaoyao11223 回答：javascript google map放大到零时为空灰色背景

大家都在问