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

How to listen for user generated zoom in Google Maps?

本文关键字：用户 缩放 谷歌地图      更新时间：2023-09-26

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

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

1） 查找有关zoom_changed的活动信息。 似乎没有。

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

3） 将

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

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

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

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

这实际上意味着检测变焦变化的唯一可靠、有据可查的方法是监听Map的zoom_changed事件。

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

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

我通过为地图创建自定义缩放按钮来解决此问题。

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

您的变焦控制功能： 

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

希望对你有帮助

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

我想做同样的事情。 我希望找到谷歌地图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();
}

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

http://goo.gl/u8gKC

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

http://goo.gl/N5HIE

（具体zoomControl）

相关文章：