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

Question

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

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

1) 查找有关 zoom_changed 的事件信息。似乎没有。

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

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

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

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

score 6 · Accepted Answer

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

这实际上意味着检测缩放变化的唯一可靠的、记录在案的方法是zoom_changed监听Map.

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

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

score 5 · Accepted Answer

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

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

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

希望能帮助到你

score 5 · Accepted Answer

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

score 3 · Accepted Answer

我想做同样的事情。我希望找到一种内置于 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();
}

score 0 · Accepted Answer

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

http://goo.gl/u8gKC

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

http://goo.gl/N5HIE

（zoomControl具体来说）

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

5 回答 5

Related

Reference