谷歌离线地图 教程

事件概览

编辑时间:2017-03-02

QQ截图20170301102405.png

浏览器中的 JavaScript 是由事件驱动的,这表示 JavaScript 会通过生成事件来响应交互,并期望程序侦听感兴趣的事件。事件分为两种类型:

  • 用户事件(如“点击”鼠标事件)是从 DOM 传播到 Google Maps API 中的。这些事件是独立的,并且与标准 DOM 事件不同

  • MVC 状态更改通知反映了 Maps API 对象中的变化,并会根据 property_changed 惯例命名

每个 Maps API 对象均可导出大量已命名的事件。如果程序想要实现某些事件,则会为这些事件注册 Javascript 事件侦听器,并在 google.maps.event 命名空间中注册 addListener() 事件处理程序,以便在接收这些事件后执行相应代码。

下例将向您介绍当您与地图交互时 google.maps.Map 会触发哪些事件。


Maps API 中的一些对象旨在对用户事件(例如鼠标事件或键盘事件)作出响应。google.maps.Marker 对象可以侦听一些用户事件,例如:

  • 'click'

  • 'dblclick'

  • 'mouseup'

  • 'mousedown'

  • 'mouseover'

  • 'mouseout


这些事件可能看上去像是标准 DOM 事件,但实际上却是 Maps API 的一部分。由于不同的浏览器所实现的DOM

事件模型并不相同,因此,Maps API 提供了用于侦听和响应这些 DOM 事件的机制,该机制无需处理各

种跨浏览器特性。这些事件通常还会在表明某些用户界面状态(例如鼠标位置)的事件中传递自变量。


MVC 状态更改

MVC 对象通常都包含状态。只要更改了对象的属性,API 就会触发已更改该属性的事件。例如,当地图的缩放

级别更改后,API 将会触发地图上的 zoom_changed 事件。您也可以在 event 命名空间方法

册 addListener() 事件处理程序,以拦截这些状态更改。

用户事件和 MVC 状态更改看上去很相似,但通常情况下,您会希望在代码中对它们进行不同的处理。例如,

MVC 事件不在其事件中传递自变量。您可能需要调用该对象上的相应 getProperty 方法,以检查 MVC 状态

更改中所更改的属性。


代码示例:


google.maps.event.addListener(map,'zoom_changed',function () {
   
alert(map.getZoom());
});