Question

有没有办法在JavaScript版本的Google Maps API中跟踪缩放到缩放事件？我想做的是让用户缩放2级而不是1级。

在桌面上使用这样的东西可以起作用：

google.maps.event.addListener(map, 'zoom_changed', function () {
    map.setZoom(map.getZoom() + 2);
});

但是使用zoom_changed事件时，您无法判断用户在使用缩放缩放手势时是缩小还是放大手机。

Answer 1

这里有一个工作示例

请插入APIKEY

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=APIKEY">
</script>
<script type="text/javascript">
  var zoom = 0;
  var map;
  function initialize() {
    var mapOptions = {
      center: { lat: -34.397, lng: 150.644},
      zoom: 8
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    zoom = map.getZoom();
    console.log("initial zoom: "+zoom);

    google.maps.event.addListener(map, 'zoom_changed', function () {
      console.log("zoom changed");
      if(map.getZoom() > zoom){
        console.log("zoomed IN");
      }else if(map.getZoom() < zoom){
        console.log("zoomed OUT");
      }
      zoom = map.getZoom();
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

创建地图对象后，保存其当前缩放。然后在zoom_changed侦听器中，将存储的值与当前的地图缩放级别进行比较。

JSBin示例：http://jsbin.com/befefax/edit?html,console,output （记得添加自己的APIKEY）

谷歌地图JavaScript API捏缩放事件

1 个答案: