简明现代魔法 -> 软件项目 -> Google Maps 事件

Google Maps 事件

2009-11-24

地图事件概述

浏览器中的 JavaScript 是“事件驱动的”,这表示 JavaScript 通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创建在 DOM 内传播的事件。对某些事件感兴趣的程序会为这些事件注册 JavaScript 事件监听器,并在接收这些事件时执行代码。

Google 地图 API 通过为地图 API 对象定义自定义事件而添加到此事件模型中。请注意,地图 API 事件是独立的,与标准 DOM 事件不同。但是,由于不同的浏览器实现不同的 DOM 事件模型,因此地图 API 还提供监听和响应这些 DOM 事件但无需处理各种跨浏览器特性的机制。

事件监听器

通过使用 GEvent 命名空间中的实用工具函数注册事件监听器,来处理 Google 地图 API 中的事件。每个地图 API 对象都导出大量已命名的事件。例如,GMap2 对象导出 click、dblclick 和 move 事件,以及其他许多事件。每个事件都在指定的环境下发生,并且可以传递标识环境的参数。例如,当用户在地图对象中移动鼠标时,会触发 mousemove 事件,并且该事件会传递鼠标所在地理位置的 GLatLng。

注册用来获取这些事件的相关通知的监听器,请使用静态方法 GEvent.addListener()。该方法有三个参数,一个对象,一个待监听事件以及一个在指定事件发生时调用的函数。例如,每当用户点击地图时,下面的代码段都会显示警告:

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
GEvent.addListener(map, "click", function() {
  alert("您点击了地图。");
});  

查看示例 (event-simple.php)

监听器也能够捕获事件的环境。在下面的示例代码中,显示用户拖动地图后地图中心的经度和纬度。

var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenter();
  document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(39.9493, 116.3975), 13);  

查看示例 (event-context.php)

在事件监听器中使用闭包

当执行事件监听器时,一个常用的好方法就是将私有数据和持久性数据附加到一个对象。JavaScript 不支持“私有”实例数据,但它却支持闭包,闭包允许内部函数访问外部变量。在事件监听器中,访问通常不附加到发生事件的对象的变量时,闭包非常有用。

下面的示例在事件监听器中使用函数闭包将加密消息分配给一组标记。点击每个标记都可以看到加密消息的一部分,该消息并不包含在标记自身内部。

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Creates a marker at the given point
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data

function createMarker(point, number) {
  var marker = new GMarker(point);
  var message = ["这","是","个","秘密","消息"];
  marker.value = number;
  GEvent.addListener(marker, "click", function() {
    var myHtml = "#" + number + "
" + message[number -1]; map.openInfoWindowHtml(point, myHtml); }); return marker; } // Add 5 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 5; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(createMarker(point, i + 1)); }

查看示例 (event-closure.php)

在事件中使用传递的参数

地图 API 事件系统中的许多事件在触发事件时都会传递参数。例如,如果地图点击发生在叠加层上,GMap2“点击”事件会传递 overlay 和 overlaylatlng;否则,它传递地图坐标的 latlng。可以通过将指定的符号直接传递给事件监听器中的函数来访问这些参数。

在下面的示例中,我们首先进行测试,即检查是否定义了 latlng 参数,以确保点击发生在地图图块上;这样,我们就可以在坐标点的上方打开一个信息窗口,并在信息窗口中显示转化为像素的坐标以及地图的缩放级别。

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

GEvent.addListener(map,"click", function(overlay, latlng) {     
  if (latlng) { 
    var myHtml = "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",
缩放级别:" + map.getZoom();
    map.openInfoWindow(latlng, myHtml);
  }
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());  

查看示例 (event-arguments.php)

将事件绑定到对象方法

当您希望将事件监听器附加到对象的特定实例时,函数非常有用。如果您不希望这样,而是希望响应事件时对象的所有实例都调用某方法,可以使用 GEvent.bind()。在下面的示例中,MyApplication 的实例将地图事件与其成员方法绑定在一起,当触发事件时会修改类状态:

function MyApplication() {
  this.counter = 0;
  this.map = new GMap2(document.getElementById("map"));
  this.map.setCenter(new GLatLng(39.9493, 116.3975), 13);
  GEvent.bind(this.map, "click", this, this.onMapClick);
}

MyApplication.prototype.onMapClick = function() {
  this.counter++;
  alert("这是您第" + this.counter + " " +
        "次点击"
}

var application = new MyApplication();  

查看示例 (event-bind.php)

监听 DOM 事件

Google 地图 API 事件模型创建并管理自己的自定义事件。但是,DOM 也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。如果您希望捕获并响应这些事件,Google 地图 API 提供的独立于浏览器的包装器可以监听和绑定 DOM 事件而不需要自定义代码。

GEvent.addDomListener() 静态方法为 DOM 节点上的 DOM 事件注册事件处理程序。同样,GEvent.bindDom() 静态方法允许您为类实例上的 DOM 事件注册事件处理程序。

删除事件监听器

不再需要事件监听器时,应将其删除。甚至在事件只需触发一次的情况下,也可能需要删除。删除闭包内的匿名函数所定义的事件监听器可能很困难。但是,addListener()、addDomListener()、bind() 和 bindDom() 函数会返回 GEventListener 句柄,可用来最终取消注册处理程序。

下面的示例通过在地图上放置标记来响应点击。任何后续点击都可删除事件监听器。请注意,这会导致不再执行 removeOverlay() 代码。另请注意,您甚至可以从事件监听器自身内部删除事件监听器。

function MyApplication() {
  this.counter = 0;
  this.map = new GMap2(document.getElementById("map"));
  this.map.setCenter(new GLatLng(39.9493, 116.3975), 13);
  var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) {
    if (this.counter == 0) {
      if (latlng) {
        this.map.addOverlay(new GMarker(latlng))
        this.counter++;
      } else if (overlay instanceof GMarker) {
        this.removeOverlay(marker)
      }
    } else {
      GEvent.removeListener(myEventListener);
    }
  }); 
}

function load() {
  var application = new MyApplication();
}  

查看示例 (event-removal.php)

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们