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

Question

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

我尝试过以下的事情,但似乎都没有效果:

1)查看有关zoom_changed的事件信息.似乎没有.

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

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

4)在gMaps API中寻找一个能让我做类似getZoomElements()的函数,然后我可以使用它来设置监听器.

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

Answer 1

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

这实际上意味着唯一可靠的,记录在案的方法来检测变焦的改变是听取zoom_changed事件的Map.

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

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

Answer 2

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

这是我项目中的代码:
编辑:删除了不必要的和自解释的公共代码

你的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

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