谷歌地图API JS - 省略缩放18

时间:2016-12-28 11:29:26

标签: javascript function api google-maps zoom

早上好, 我想在我的网站上使用谷歌地图。 重要设置: maxZoom:19, minZoom:14 我不想显示变焦18。 当你从17改变缩放时,我想设置它 - > 18,我想要17 - > 19 相反,19 - > 17。

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

从17 - > 19是没关系,但从19 - > 17它无法正常工作

谢谢

1 个答案:

答案 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>