Javascript 如何在谷歌地图中收听用户生成的缩放？

我想知道Google Maps zoom_changed事件是什么时候由用户通过+/-缩放按钮进行交互触发的。如果我对zoom_changed使用常规事件侦听器，我无法判断它是用户生成的事件还是由fitBounds（）之类的内容引起的缩放更改。寻找最好的方法来做到这一点

我试过以下方法，但似乎都不管用：

1） 查找有关zoom_已更改的事件信息。似乎没有

2） 为mouseover和mouseout添加侦听器，让我设置一个标志，以查看用户是否在地图边界内，并检查zoom_changed上的标志。这是不起作用的，因为地图不考虑缩放按钮作为地图框架的一部分（换句话说，悬停在缩放按钮触发鼠标输出事件）。 3） 将普通（非gMap）侦听器添加到缩放按钮。然而，我找不到一个明确的CSS选择器，它只允许我抓取按钮

4） 在gmapsapi中寻找一个函数，它可以让我执行getZoomElements（）之类的操作，然后我可以使用它设置侦听器

---

奇怪的是，如果我在地图上添加一个自定义控件，我可以清楚地做我想做的事情。看起来很奇怪，他们会强迫我这样做，而不是在默认的缩放控件中挂起一个钩子。

我不会只挂起

+

/

-

按钮（或者您自己的自定义控件上的按钮）。用户可以使用鼠标滚轮或双击地图来更改地图的缩放。另外，您将依赖于实现细节而不是文档化的API，这是一个主要的禁忌

这确实意味着检测缩放变化的唯一可靠且有文档记录的方法是聆听

地图的声音

如果事件处理程序无法确定事件是来自用户操作还是API调用，则有两种方法：


在调用API函数之前设置一个标志，以便知道可以忽略此更改
你能重新设计你的应用程序吗？这样，缩放变化是源于代码还是用户都无关紧要
我建议使用自定义控件进行放大/缩小，然后在自定义Conglol上使用事件侦听器：


您可以轻松隐藏默认的缩放控件：


（
zoomControl
具体来说）
我想做同样的事情。我希望找到一种内置于GoogleMapsAPI中的方法，但至少在初始化地图时，应该能够将起始缩放级别存储为变量。然后，将getZoom（）的结果与它进行比较，以了解它是放大还是缩小

例如：

map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 11 });
var previous_zoom = 11;

google.maps.event.addListener(map,'zoom_changed',function(){
  if(map.getZoom() > previous_zoom) {
    alert('You just zoomed in.');
  }
  previous_zoom = map.getZoom();
}

我通过为我的地图创建自定义缩放按钮解决了这个问题

以下是我的项目代码：

编辑：删除了不必要的、自解释的通用代码

您的zoomControl功能：

function zoomControl(map, div) {

  var controlDiv = div,
      control = this;

  // Set styles to your own pa DIV
  controlDiv.style.padding = '5px';

  // Set CSS for the zoom in div.
  var zoomIncrease = document.createElement('div');
  zoomIncrease.title = 'Click to zoom in';
  // etc.

  // Set CSS for the zoom in interior.
  var zoomIncreaseText = document.createElement('div');
  // Use custom image
  zoomIncreaseText.innerHTML = '<strong><img src="./images/plusBut.png" width="30px" height="30px"/></strong>';
  zoomIncrease.appendChild(zoomIncreaseText);

  // Set CSS for the zoom out div, in asimilar way
  var zoomDecreaseText = document.createElement('div');
  // .. Code .. Similar to above

  // Set CSS for the zoom out interior.
  // .. Code ..

  // Setup the click event listener for Zoom Increase:
  google.maps.event.addDomListener(zoomIncrease, 'click', function() {
      zoom = MainMap.getZoom();
      MainMap.setZoom(zoom+1);
      // Other Code parts
  });

  // Setup the click event listener for Zoom decrease:
  google.maps.event.addDomListener(zoomDecrease, 'click', function() {
      zoom = MainMap.getZoom();
      MainMap.setZoom(zoom-1);
  });
}

<>希望有助于
也考虑鼠标轮——用户有不止一种方式来操作缩放。不要忘记触摸事件和键盘。这是不起作用的，因为按钮控件（无论是内置的还是自定义的）不是用户可以改变地图缩放的唯一方式。就像我一样。也许你和我对原始海报的问题有不同的理解。他的问题的第一行是：“我想知道Google Maps zoom_changed事件是什么时候由用户通过+/-缩放按钮交互触发的。”他只想知道用户何时单击控件……而不是通过鼠标滚轮或其他方式。他的问题的突出部分：“特别是通过用户与+/-按钮的交互。”阅读第二句。他真正想做的是区分由用户交互（无论源代码是什么）和API调用引起的
zoom\u changed
。恐怕我听不出来。因此，第二句话指出，他试图找出是否有用户通过
zoom\u changed
单击控件，但原因很明显，返回的结果不明确。无论如何，我认为在这一点上，让OP来决定我们是否正确地解释了他的问题和意图是值得的。这可能没有帮助。我有一个类似的例子，我将缩放级别预设为12，并在zoom_changed事件中比较新的缩放值和上一个缩放值。当调用fitBounds时（即使用户未与地图交互，例如：当地图在加载时尝试适应标记时），缩放级别可能会更改，并且此条件仍然会成功，并且用户似乎希望放大/缩小，但事实并非如此。
var zoomFlag = "user"; // always assume it's user unless otherwise

// some method changing the zoom through API
zoomFlag = "api";
map.setZoom(map.getZoom() - 1);
zoomFlag = "user";

// google maps event handler
zoom_changed: function() {
  if (zoomFlag === "user") {
    // user zoom
  }
}

var zoomFlag = "user"; // always assume it's user unless otherwise

// some method changing the zoom through API
zoomFlag = "api";
map.setZoom(map.getZoom() - 1);
zoomFlag = "user";

// google maps event handler
zoom_changed: function() {
  if (zoomFlag === "user") {
    // user zoom
  }
}