看了下GOOGLE地图的帮助文档,有实例也不是很难。 但是我的目标是地图上表示出厅点的位置,必须知道具体的经纬度啊,但是API中Gmap2只提供了中心点的经纬度 (getCenter() )。找到了一个可以查看具体点的经纬度的网页。也是通过GOOGLE地图来实现的。
地址是http://www.playgoogle.com/googlemap/tool1.html
这个做的确实不错
这个不但有经纬度查询,还有测距,最后还有附近酒店景点查找,还有具体地点查找。功能已经很完善了。而且有的功能还很炫。
我们来自己实现经纬度查询。就是当点击一点的时候直接弹出这个点的经纬度。
找到了关键性代码如下
marker = new GMarker(initPt, {draggable: true,icon: ico});//标记了一个地图上的点
GEvent.addListener(marker, "dragend", function() {//在地图上添加这个点,并且注册了事件
initPt = marker.getLatLng();//得到创建点经纬度
map.panTo(initPt);//移动到创建点 这个时候也可以用getCenter()得到了
document.getElementById("txtLat").value=initPt.lat();//纬度
document.getElementById("txtLng").value=initPt.lng();//经度
//这个书写顺序与习惯不同 即(20,30)表示 纬度20 经度30
}
1 GMarker
是GOOGLE地图中 标记地图上的位置的类。标记对象包含 latlng
(这是标记在地图中锚定的地理位置)和 icon
。
将标记对象添加到地图中后,通过标记可打开该地图的信息窗口。标记对象会触发鼠标事件和信息窗口事件。
2 GEvent 包含的函数可用于注册事件处理程序(既处理自定义事件也处理 DOM 事件)和触发自定义事件。此 API 定义的所有事件都是由 GEvent.trigger()
内部触发的自定义事件。
3 GLatLng
是以经度和纬度表示的地理坐标点。
请注意,尽管进行地图投影时通常将经度与 x 坐标相关联,将纬度与 y 坐标相关联,但总是先填写纬度坐标,后填写经度坐标,因为这符合绘图习惯。另请注意,不能修改 GLatLng
的坐标。如果想要计算另一个点,必须新建一个。
下面是一个实现了 显示点击点和地图中心点 经纬度的代码
<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 地图 JavaScript API 示例: 事件参数</title> <mce:script src="http://www.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" mce_src="http://www.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(30.657,104.08), 18); GEvent.addListener(map,"click", function(overlay,latlng) { var myHtml = "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",<br>缩放级别为:" + map.getZoom()+"<br/> 此点的经纬度为"+latlng+"<br/>中心点的经纬度为"+map.getCenter() ; map.openInfoWindow(latlng, myHtml); }); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); } } // --></mce:script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 800px; height: 500px"></div> </body> </html>
其实我饶了个大圈子
GMap2
对象在导出 click
、dblclick
和 move
事件,以及其他许多事件的时候。它们都可以传递标识环境的参数。
例如,当用户在地图对象中移动鼠标时,会触发 mousemove
事件,并且该事件会传递鼠标所在地理位置的 GLatLng
。而GLaLng就包含了地理位置。
另外 map.fromContainerPixelToLatLng(point); 这个方法直接可以将DIV的像素转换成地理位置