谷歌地图JavaScript API捏缩放事件

Google Maps JavaScript API Pinch to Zoom Event

本文关键字：缩放 事件 API JavaScript 谷歌地图      更新时间：2023-09-26

是否有一种方法来跟踪缩放事件在谷歌地图API的JavaScript版本?我想做的是让用户放大2级而不是1级。

在桌面上使用这样的东西可以工作:

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

但是使用zoom_changed事件，当用户使用缩放手势时，你无法判断用户在移动设备上是放大还是缩小。

这里有一个工作示例

请插入您的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)

相关文章：