Google Map学习（二）简单的Google Map，Google Map事件

最新推荐文章于 2023-07-13 10:13:33 发布

weixin_30828379

最新推荐文章于 2023-07-13 10:13:33 发布

阅读量149

点赞数

文章标签： python javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/psunny/archive/2009/08/31/1557509.html

版权

      上一节已经学习了Google Map的基础。首先回顾一下上一节的基本内容
            地图对象的创建：var map = new GMap2(document.getElementById("map"));
            设置map的默认显示形式：map.setMapType(G_HYBRID_MAP);
            设置地图的位置（这是必须的）：map.setCenter(new GLatLng(22.4977,113.9208),19);
            添加一个信息窗口：map.openInfoWindowHtml(map.getCenter(),document.createTextNode("北科创业大厦"));
      以上内容都非常的简单，但是仅仅是显示了一张地图，非常单一。
      这一节，我们主要学习地图中的事件，并且通过事件做一些简单的交互。

Google Map的命名空间

      到现在大家可能已经发现了Google Map API中的类都带有一个大写字母G，G是Google Map API的顶级命名空间，它的原型是google.maps.*,比如GMap2也可以写成google.maps.Map2。

地图事件
      JavaScript是”事件驱动的“，也就是说JavaScript通过事件来响应交互。比如用户希望在某个DOM元素移动鼠标时，发生一些什么，那么在这个DOM元素上移动鼠标就是一个事件，我们要做的就是监听这个事件，为这个事件注册监听器，也就是写一个监听函数，用户所希望的东西，我们都可以在函数中进行表达。
      Google 地图 API 通过为地图 API 对象定义自定义事件而添加到此事件模型中。虽然不同浏览器中的DOM事件不同，但是Google Map API已经帮包含跨浏览器的机制，我们无需再因为用户使用不同浏览器而苦恼了。

注册事件监听器

通过使用GEvent命名空间中的实用工具函数注册事件监听器，来处理Google Map API中的一些事件。每个对象都包含很多已有的事件，例如GMap2对象的click、dbclick事件。
注册事件的方法很简单：GEvent.addListener(object,event,function)，三个参数分别对象，待监听事件，事件调用函数。例如：

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< title ></ title >

< script type ="text/javascript" src ="http://ditu.google.cn/maps?file=api&v=2" >

</ script >

< script type ="text/javascript" >

function load()

{

if (GBrowserIsCompatible())

{

var px = 30.6562;

var py = 104.0639;

var cx = px;

var cy = py;

var zoom = 12;

var map = new GMap2(document.getElementById("map"));

var point = new GLatLng(px, py);

map.setCenter(point,zoom);

}

/**//*

获得当前点击的地理坐标

GEvent.addListener(map, "click", function(marker, point)

{

if (point)

{

px = point.lat();

py = point.lng();

zoom = map.getZoom();

document.getElementById("lat").value = px;

document.getElementById("lng").value = py;

}

});

/**//*

zoomend地图到达新的缩放级别时会触发此事件。事件处理程序接收先前的缩放级别和新缩放级别作为参数。

GEvent.addListener(map, "zoomend", function()

{

zoom = map.getZoom();

//document.getElementById("zoom").value = zoom;

});

/**//*

moveend结束地图视图的更改时会触发此事件。拖动或放大/缩小都会触发此事件

GEvent.addListener(map, "moveend", function()

{

var center = map.getCenter();

cx = center.lat();

cy = center.lng();

document.getElementById("lat").value = cx;

document.getElementById("lng").value = cy;

document.getElementById("centerLat").value = cx;

document.getElementById("centerLng").value = cy;

document.getElementById("zoom").value = zoom;

});

document.getElementById("lat").value = px;

document.getElementById("lng").value = py;

document.getElementById("centerLat").value = cx;

document.getElementById("centerLng").value = cy;

document.getElementById("zoom").value = zoom;

}

window.onload = load;

</ script >

</ head >

< body >

< div >

当前经度： < input type ="text" id ="lat" />< br />

当前纬度： < input type ="text" id ="lng" />< br />

中心经度： < input type ="text" id ="centerLat" />< br />

中心纬度： < input type ="text" id ="centerLng" />< br />

当前倍率： < input type ="text" id ="zoom" />

</ div >

< div style ="width:500px; height:500px;" id ="map" ></ div >

</ body >

</ html >

(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA35MvS7AnL0cjW_AmAJjW7BQQxUWGaJxgL6MJAQ51I1vKwWJYtxROqcWbldYkZFdMcEwKzaganeiujA"> </script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var px = 30.6562; var py = 104.0639; var cx = px; var cy = py; var zoom = 12; var map = new GMap2(document.getElementById("map")); var point = new GLatLng(px, py); map.setCenter(point,zoom); } /* 获得当前点击的地理坐标 */ GEvent.addListener(map, "click", function(marker, point) { if (point) { px = point.lat(); py = point.lng(); zoom = map.getZoom(); document.getElementById("lat").value = px; document.getElementById("lng").value = py; } }); /* zoomend地图到达新的缩放级别时会触发此事件。事件处理程序接收先前的缩放级别和新缩放级别作为参数。 */ GEvent.addListener(map, "zoomend", function() { zoom = map.getZoom(); //document.getElementById("zoom").value = zoom; }); /* moveend结束地图视图的更改时会触发此事件。拖动或放大/缩小都会触发此事件 */ GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); cx = center.lat(); cy = center.lng(); document.getElementById("lat").value = cx; document.getElementById("lng").value = cy; document.getElementById("centerLat").value = cx; document.getElementById("centerLng").value = cy; document.getElementById("zoom").value = zoom; }); document.getElementById("lat").value = px; document.getElementById("lng").value = py; document.getElementById("centerLat").value = cx; document.getElementById("centerLng").value = cy; document.getElementById("zoom").value = zoom; } window.onload = load; </script> </head> <body> <div> 当前经度：<input type="text" id="lat"/><br /> 当前纬度：<input type="text" id="lng"/><br /> 中心经度：<input type="text" id="centerLat"/><br /> 中心纬度：<input type="text" id="centerLng"/><br /> 当前倍率：<input type="text" id="zoom"/> </div> <div style="width:500px; height:500px;" id="map"></div> </body> </html>

将事件绑定到对象方法

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< title ></ title >

< script type ="text/javascript" src ="http://ditu.google.cn/maps?file=api&v=2" >

</ script >

< script type ="text/javascript" >

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 + " " + "次点击");

}

window.onload = function()

{

var application = new MyApplication();

}

</ script >

</ head >

< body >

< div id ="map" style ="width:500px; height:500px;" ></ div >

</ body >

</ html >

(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA35MvS7AnL0cjW_AmAJjW7BQQxUWGaJxgL6MJAQ51I1vKwWJYtxROqcWbldYkZFdMcEwKzaganeiujA"> </script> <script type="text/javascript"> 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 + " " + "次点击"); } window.onload = function(){ var application = new MyApplication(); } </script> </head> <body> <div id="map" style="width:500px; height:500px;"></div> </body>

监听DOM事件

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

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

删除事件监听器

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

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

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< title ></ title >

< script type ="text/javascript" src ="http://ditu.google.cn/maps?file=api&v=2" >

</ script >

< script type ="text/javascript" >

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);

}

});

}

window.onload = function()

{

var application = new MyApplication();

}

</ script >

</ head >

< body onunload = "GUnload()" >

< div id ="map" style ="width:500px; height:500px;" >

</ div >

</ body >

</ html >

(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA35MvS7AnL0cjW_AmAJjW7BQQxUWGaJxgL6MJAQ51I1vKwWJYtxROqcWbldYkZFdMcEwKzaganeiujA"> </script> <script type="text/javascript"> 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); } }); } window.onload = function(){ var application = new MyApplication(); } </script> </head> <body onunload = "GUnload()"> <div id="map" style="width:500px; height:500px;"> </div> </body> </html>

转载于:https://www.cnblogs.com/psunny/archive/2009/08/31/1557509.html