google map开发学习笔记（四）

最新推荐文章于 2024-01-21 18:00:53 发布

陌上风情

最新推荐文章于 2024-01-21 18:00:53 发布

阅读量1.2k

点赞数

分类专栏： google map 文章标签： google function javascript api xhtml html

本文链接：https://blog.csdn.net/liuyong0818/article/details/5322709

版权

google map 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前面我们仅仅做到了一个静态的地图，今天我们来看看如何给这个地图上面添加一些事件方法，使之能通过鼠标键盘等动作和用户交互起来。

我们通过使用 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("您点击了地图。"); });

上面是一个简单的例子，给地图对象添加一个点击事件侦听。

现在我们来再前几节的代码基础上，创建一个带有mouseover事件的标记。

看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <mce:script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" mce_src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" type="text/javascript"></mce:script>  <mce:script type="text/javascript"></mce:script> </head> <body οnlοad="initialize()" οnunlοad="GUnload()"> <input type="text" id="address" name="address" /> <button οnclick="showAddress(document.getElementById('address').value);">提交</button> <div id="map_canvas" style="width:800px;height:600px;"></div> </body> </html>

了解更多关于事件对象的请看这里：http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GEvent