2016-12-28 2 views
-2

Доброе утро, Я хочу использовать карту google на своем веб-сайте. важные параметры: MaxZoom: 19, minZoom: 14 Я не хочу, чтобы отобразить с трансфокатором, 18. Я хотел бы установить, что при изменении масштаба с 17 -> 18, я хочу 17 -> 19 и, наоборот, 19 -> 17.Google maps API JS - пропустить zoom 18

google.maps.event.addListener(map, 'zoom_changed', function() { 
    if (map.getZoom() == 18) 
{ 
    map.setZoom(19); 
} 
}); 

из 17 -> 19 это нормально, но с 19 -> 17 это не работает должным образом

Спасибо

+0

Вы можете отобразить часть вашего кода, чтобы показать свои усилия? Это дает больше контекста и облегчает вам помощь. –

ответ

0

Вы должны следить предыдущий масштаб, а также текущий зум.

var prev_zoom = 17; 
google.maps.event.addListener(map, 'zoom_changed', function() { 
    document.getElementById('zoom').innerHTML = map.getZoom(); 
    if (map.getZoom() == 18 && prev_zoom == 17) { 
    map.setZoom(19); 
    } else if (map.getZoom() == 18 && prev_zoom == 19) { 
    map.setZoom(17) 
    } 
    prev_zoom = map.getZoom(); 
}); 

proof of concept fiddle

фрагмент кода:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 17, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var prev_zoom = 17; 
 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
 
    document.getElementById('zoom').innerHTML = map.getZoom(); 
 
    if (map.getZoom() == 18 && prev_zoom == 17) { 
 
     map.setZoom(19); 
 
    } else if (map.getZoom() == 18 && prev_zoom == 19) { 
 
     map.setZoom(17) 
 
    } 
 
    prev_zoom = map.getZoom(); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);
html, 
 
body, 
 
#map_canvas { 
 
    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_canvas"></div>