Question

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

我尝试了以下几项，其中任何一项似乎都不起作用：

1）查看有关zoom_changed的事件信息。似乎没有。

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

3）向缩放按钮添加普通（非gMap）侦听器。但是，我找不到一个确定的CSS选择器，只允许我抓住按钮。

4）在gMaps API中寻找一个能让我做类似getZoomElements（）的函数，然后我可以使用它设置监听器。

奇怪的是，如果我向地图添加自定义控件，我可以清楚地做我想要的。看起来很奇怪他们会强迫我这样做，而不是勾选默认的缩放控件。

Answer 1

我不会只是挂钩+ / -按钮（或者你自己的自定义控件上的按钮）。用户可以使用鼠标滚轮更改地图上的缩放，或双击地图。此外，您将依赖于实现细节，而不是文档化的API，这是主要禁止。

这实际上意味着唯一可靠的记录的检测缩放变化的方法是收听Map的{{3}}。

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

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

Answer 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);
}

希望有所帮助

Answer 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();
}

Answer 4

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

Answer 5

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

http://goo.gl/u8gKC

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

http://goo.gl/N5HIE

（zoomControl具体）

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

5 个答案: