如何在 Google 地图中收听用户生成的缩放？答案

【问题标题】：How to listen for user generated zoom in Google Maps?如何在 Google 地图中收听用户生成的缩放？
【发布时间】：2012-04-23 06:26:48
【问题描述】：

我想知道 Google 地图 zoom_changed 事件何时由用户与 +/- 缩放按钮的交互专门触发。如果我为 zoom_changed 使用通用事件侦听器，我无法判断它是用户生成的事件还是由 fitBounds() 之类的东西引起的缩放更改。寻找最好的方法来做到这一点。

我尝试了以下方法，但似乎都不起作用：

1) 查找有关 zoom_changed 的事件信息。好像没有。

2) 为 mouseover 和 mouseout 添加侦听器，让我设置一个标志以查看用户是否在地图边界内，并检查 zoom_changed 上的标志。这不起作用，因为地图不会将缩放按钮视为地图框架的一部分（换句话说，将鼠标悬停在缩放按钮上会触发 mouseout 事件）。

3) 为缩放按钮添加一个普通（非 gMap）监听器。但是，我找不到一个明确的 CSS 选择器，可以让我只抓取按钮。

4) 在 gMaps API 中寻找可以让我执行 getZoomElements() 之类的函数，然后我可以使用它设置侦听器。

奇怪的是，如果我向地图添加自定义控件，我可以清楚地做我想做的事。他们会强迫我这样做，而不是使用默认缩放控件，这似乎很奇怪。

【问题讨论】：

还要考虑鼠标滚轮——用户操作缩放的方法不止一种。
不要忘记触摸事件和键盘。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

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
  }
}

【讨论】：

【解决方案2】：

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

这是我项目中的代码：
编辑：删除了不必要且不言自明的通用代码

你的 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);
  });
}

你的初始化函数：

function initializeMap() {

    var latlng = new google.maps.LatLng(38.6, -98);
    var options = {
        zoom : 5,
        center : latlng,
        mapTypeId : google.maps.MapTypeId.ROADMAP,  
        // Other Options
    };
    MainMap = new google.maps.Map(document.getElementById("google-map-canvas"),
            options);

    // The main part - Create your own Custom Zoom Buttons
    // Create the DIV to hold the control and call the zoomControl()
    var zoomControlDiv = document.createElement('div'), 
        zoomLevelControl = new zoomControl(MainMap, zoomControlDiv);

    zoomControlDiv.index = 1;
    MainMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(zoomControlDiv);
}

希望对你有帮助

【讨论】：

【解决方案3】：

我也想做同样的事情。我希望找到一种内置于 Google Maps API 的方法，但至少，您应该能够在初始化地图时将起始缩放级别存储为变量。然后，将 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();
}

【讨论】：

这可能没有帮助。我有一个类似的情况，我将缩放级别预设为 12，并在 zoom_changed 事件中比较新的和上一个缩放值。当 fitBounds （即使用户没有与地图进行交互，例如：当地图在加载时尝试适合标记时）被调用时，缩放级别可能会改变，这种情况仍然会成功，看起来用户想要放大/缩小哪个不是真的。

【解决方案4】：

我建议使用自定义控件进行放大/缩小，然后在自定义 congrol 上使用事件侦听器：

http://goo.gl/u8gKC

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

http://goo.gl/N5HIE

（具体是zoomControl）

【讨论】：

这不起作用，因为按钮控件（无论是内置的还是自定义的）不是用户可以更改地图缩放的唯一方式，就像我 outlined。
也许你和我对原始发帖人的问题的解释不同。他问题的第一行：“我想知道 Google Maps zoom_changed 事件何时被用户与 +/- 缩放按钮的交互专门触发。”他只想知道用户何时点击了控件……而不是通过鼠标滚轮或其他方式。他的问题的突出部分：“特别是通过用户与 +/- 按钮的交互。”
阅读第二句。他真正试图做的是区分由用户交互（无论来源）引起的zoom_changed 和 API 调用。
恐怕对我来说听起来不是这样。所以第二句表明他试图通过zoom_changed 找出用户是否点击了控件，但由于明显的原因返回了一个模棱两可的结果。无论如何，我认为此时值得让 OP 来确定我们是否正确解释了他的问题和意图。

【解决方案5】：

我不会只使用+/- 按钮（或您自己的自定义控件上的按钮）。用户可以使用鼠标滚轮或双击地图来更改地图的缩放比例。此外，您将依赖实现细节而不是记录在案的 API，这是一个主要的禁忌。

这确实意味着检测缩放变化的唯一可靠、记录的方法是收听Map 中的zoom_changed event。

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

在调用 API 函数之前设置一个标志，以便您知道可以忽略此更改。
您能否重新设计您的应用程序，使缩放更改来自代码还是用户都无关紧要？

【讨论】：