Google Haritalar'da Yer Paylaşım Yerleşimini belirli yakınlaştırma düzeyleriyle sınırlandırma

Question

Google Maps Ground Overlay'ler görünürlüğünü sınırlamak için bir yolu var mı sadece belirli zum seviyeleri, onların official documentation gösterilen Google's example yılında

12 ile 14., Yer Katmanı tüm yakınlaştırma seviyelerinde görüntüler söylerler.

var historicalOverlay; 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 13, 
    center: {lat: 40.740, lng: -74.18} 
    }); 

    var imageBounds = { 
    north: 40.773941, 
    south: 40.712216, 
    east: -74.12544, 
    west: -74.22655 
    }; 

    historicalOverlay = new google.maps.GroundOverlay(
     'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', 
     imageBounds); 
    historicalOverlay.setMap(map); 
} 

Answer 1

map on the 'zoom_changed` event (documentation) bir olay dinleyicisi ekleyin: İşte onların kodudur

zoom_changed | Bağımsız Değişkenler: Yok Harita yakınlaştırma özelliği değiştiğinde bu olay tetiklenir.

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoom = map.getZoom(); 
    if ((zoom > 12) && (zoom < 15)) { 
    historicalOverlay.setMap(map); 
    } else { 
    historicalOverlay.setMap(null); 
    } 
}); 

var historicalOverlay; 
 
var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 13, 
 
    center: { 
 
     lat: 40.740, 
 
     lng: -74.18 
 
    } 
 
    }); 
 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
 
    document.getElementById('zoom').innerHTML = "zoom =" + map.getZoom(); 
 
    var zoom = map.getZoom(); 
 
    if ((zoom > 12) && (zoom < 15)) { 
 
     historicalOverlay.setMap(map); 
 
    } else { 
 
     historicalOverlay.setMap(null); 
 
    } 
 
    }) 
 

 
    var imageBounds = { 
 
    north: 40.773941, 
 
    south: 40.712216, 
 
    east: -74.12544, 
 
    west: -74.22655 
 
    }; 
 

 
    historicalOverlay = new google.maps.GroundOverlay(
 
    'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', 
 
    imageBounds); 
 
    historicalOverlay.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="zoom"></div> 
 
<div id="map"></div>