google map开发学习笔记（四）

最新推荐文章于 2025-02-24 16:54:23 发布

xo_zhang

最新推荐文章于 2025-02-24 16:54:23 发布

阅读量788

点赞数

分类专栏： google map 文章标签： google map开发学习笔记四

google map 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Google Maps API实现地图交互，包括添加点击事件和鼠标悬停事件，以及如何利用事件监听器响应用户的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

[javascript] view plain copy print ?

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

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

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

看代码：

[xhtml] view plain copy print ?

<!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"><!--
var geocoder = null;
var map = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder(); //地址解析对象
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_NORMAL_MAP);
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
}
}
function showAddress(address) {
if(geocoder){
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert("无法解析:" + address);
} else {
map.setCenter(point, 13);
//创建一个标记叠加层
map.addOverlay(createMaker(point));
//打开一个信息窗口
// marker.openInfoWindowHtml(address);
}
}
);
}
}
//创建一个标记，并为该标记注册一个侦听器
function createMaker(point){
var marker = new GMarker(point);
GEvent.addListener(marker,'mouseover',function(){
var myHtml = 'GPoint为：' + point.toString() +', 缩放级别：' + map.getZoom();
map.openInfoWindow(point,myHtml);
});
return marker;
}
// --></mce:script>
</head>
<body onload="initialize()" onunload="GUnload()">
<input type="text" id="address" name="address" /> <button onclick="showAddress(document.getElementById('address').value);">提交</button>
<div id="map_canvas" style="width:800px;height:600px;"></div>
</body>
</html>

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