JavaScript-карта Google пустой серый фон при увеличении до нуля - PullRequest
Новая
       86

JavaScript-карта Google пустой серый фон при увеличении до нуля

0 голосов
/ 08 ноября 2019

Я использую Google Map Javascript для моего гибридного веб-приложения. Когда я уменьшу карту до 0, она покажет серую область, в то время как плитки карты будут в центре экрана.

Можно ли как-то это исправить, чтобы избежать серой области?

Я пытался использовать изображение карты для фона, но это заметно при перемещении карты. Я также попытался установить minZoom на 2, но все же, если я прокручиваю карту, серая область будет видна.

Или возможно предотвратить прокрутку области карты, когда масштаб равен '2`?

MinZoom по умолчанию

enter image description here

MinZoom 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 Ответ

1 голос
/ 08 ноября 2019

Вы можете найти реальных северных и южных краев карты.

Затем используйте 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>
...