8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. google-maps
  3. javascript谷歌地图缩放到零时为空灰色背景

javascript谷歌地图缩放到零时为空灰色背景

Jean-Milost Reymond 1月前
31 0

我正在为我的混合 webview 应用使用 google map javascript。当我将地图缩小到 0 时，它会显示灰色区域，而地图图块将位于屏幕中央。有什么方法可以解决这个问题以避免...

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

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

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

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

MinZoom 默认值

enter image description here

最小缩放 2

enter image description here

我也尝试了下面的方法，但缩小后，它不允许我放大回来。 

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"); 
        }
    });
帖子版权声明 1、本帖标题：javascript谷歌地图缩放到零时为空灰色背景
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Jean-Milost Reymond在本站《google-maps》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    你可以找到 地图 真实的南北边缘

    然后使用 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>
返回
作者最近主题：