如何检测传单地图是放大还是缩小？答案

【问题标题】：How to detect if leaflet map is zoomed in or zoomed out?如何检测传单地图是放大还是缩小？
【发布时间】：2018-03-07 05:09:49
【问题描述】：

Leaflet 有“zoomstart”和“zoomend”事件，但我想知道在缩放事件之后地图是放大还是缩小。

编辑1：

我添加了一个小提琴，但它不能正常工作：http://jsfiddle.net/LnzN2/1940/

var prevZoom = map.getZoom();

map.on('zoomstart',function(e){
  debugger;
  var currZoom = map.getZoom();
  var diff = prevZoom - currZoom;
  if(diff > 0){
    alert('zoomed in');
  } else if(diff < 0) {
    alert('zoomed out');
  } else {
    alert('no change');
  }
  prevZoom = currZoom;
});

【问题讨论】：

可以查看缩放前后的缩放级别
谢谢@Akshaypadwal 我根据你的建议添加了一个小提琴
尝试放大功能

标签： javascript leaflet

【解决方案1】：

只需将zoomstart 更改为zoomend，因为库会在缩放完成后更新级别。

此外，当值为 -1 时，它会降低缩放级别，因此这意味着您已放大，但您却以相反的方式进行了放大。

改变了这一切，在我看来解决了这个问题。检查下面的sn-p。这是更新的小提琴http://jsfiddle.net/LnzN2/1965/

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {
	   maxZoom: 18,
	   attribution: osmAttrib
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([0,0], 2).addLayer(osm);
var prevZoom = map.getZoom();
    
map.on('zoomend',function(e){
	debugger;
	var currZoom = map.getZoom();
    var diff = prevZoom - currZoom;
    if(diff > 0){
  	   alert('zoomed out');
    } else if(diff < 0) {
  	   alert('zoomed in');
    } else {
  	   alert('no change');
    }
    prevZoom = currZoom;
});

#map {
    height: 500px;
    width: 80%;
}

<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map"></div>

【讨论】：