1、GMap2 类(地图类)
A、构造函数:GMap2(container:Node, opts?:GMapOptions)
说明:在指定的 HTML 容器中创建新的地图,该容器通常是一个 DIV 元素。如果可选参数 opts.mapTypes 中没有给出地图类型集合,则使用默认的集合 G_DEFAULT_MAP_TYPES。如果可选参数
opts.size 中没有给出大小,则使用 container 的大小。如果给出了 opts.size,则相应地调整地图容器元素的大小。请参见 class GMapOptions。注意:需要先将地图居中,才能使用该地图。您应该
立即调用 GMap2.setCenter() 来初始化使用该构造函数创建的地图。
var map = new GMap2(document.getElementById('map_canvas'));
产生一个GMap对象,map_canvas为DOC文档元素ID。
B、setCenter(center:GLatLng, zoom?:Number, type?:GMapType)
按指定的中心设置地图视图。也可以同时设置缩放级别和地图类型。地图类型必须是地图已知的类型。请参见构造函数和方法 addMapType()。必须在构造后先调用此方法,才能设置地图的初始状态
。在调用此函数之前调用对新构造的 GMap2 对象执行的操作,这是错误的。
map.setCenter(new GLatLng(39.9, 116.3975), 13);
设置地图视图中心点。
C、addControl(control:GControl, position?:GControlPosition)
将控件添加到地图。地图上的位置由可选的 position 参数确定。如果此参数不存在,则使用由 GControl.getDefaultPosition() 方法确定的控件默认位置。一个控件实例只能向地图中添加一次。
map.addControl(new GSmallMapControl());
创建带有可在四个方向平移、放大和缩小的按钮的控件。
map.addControl(new GLargeMapControl());
创建带有可在四个方向平移、放大、缩小的按钮以及缩放滑块的控件。
map.addControl(new GSmallZoomControl());
创建带有放大和缩小按钮的控件。
map.addControl(new GScaleControl());
创建显示地图比例尺的控件。
map.addControl(new GMapTypeControl());
创建一个标准地图类型控件,通过按钮在受支持地图类型之间进行选择和切换。
D、addOverlay(overlay:GOverlay)
将叠加层添加到地图中,并触发 addoverlay 事件。
map.addOverlay(marker);
在地图上添加一个标识层。
2、GMarker 类(位置标识类)
A、构造函数:GMarker(latlng:GLatLng, opts?:GMarkerOptions)
GMarker 标记地图上的位置。它实现 GOverlay 接口,因此可使用 GMap2.addOverlay() 方法添加到地图中。
按 GMarkerOptions 中指定的选项在 latlng 创建标记。默认情况下,标记是可点击的,并且有默认图标 G_DEFAULT_ICON。
var marker = new GMarker(new GLatLng(39.9090, 116.3977));
创建一个标识对象,通常被用在 map.addOverlay(marker); 当作参数传入。
B、openInfoWindowHtml(content:String, opts?:GInfoWindowOptions)
通过标记图标打开地图信息窗口。信息窗口的内容为 DOM 节点。只适用于 GInfoWindowOptions.maxWidth 选项。
var html = '<div style="width:80px; padding:5px 10px;">'+'北京天安门'+'</div>';
marker.openInfoWindowHtml(html);
在图片标识上显示提示信息“北京天安门”。
C、openInfoWindow(content:Node, opts?:GInfoWindowOptions)
通过标记图标打开地图信息窗口。信息窗口的内容为 DOM 节点。只适用于 GInfoWindowOptions.maxWidth 选项。
3、GLatLng 类(坐标类)
GLatLng 是以经度和纬度表示的地理坐标点。
A、构造函数:GLatLng(lat:Number, lng:Number, unbounded?:Boolean)
注意纬度和经度的顺序。如果 unbounded 标记为 true,则将使用传递的数字,否则纬度会限定在 -90 度和 +90 度之间,而经度会限定在 -180 度和 +180 度之间。
var point = new GLatLng(39.9090, 116.3977);
生成一个坐标点对象。 map.addOverlay(new GMarker(point)); 通常point作为GMarker的参数对象使用。
B、lat() 返回以度数表示的纬度坐标(-90 到 +90 之间的数字)。
C、lng() 返回以度数表示的经度坐标(-180 到 +180 之间的数字)。
4、GClientGeocoder 类(地址解析器对象)
此类用于和 Google 服务器建立直接通信,以获取用户指定地址的地址解析。另外,地址解析器可维护自己的地址缓存,可以无需往返于服务器而回答重复的查询。作为常用的最佳做法,建议不要在
回路中使用 GClientGeocoder 函数。有多个地址要进行地址解析的开发人员或许应改为使用我们的 HTTP 地址解析器。
A、构造函数:GClientGeocoder(cache?:GGeocodeCache)
创建地址解析器的新实例,直接与 Google 服务器对话。可选的缓存参数允许指定已知地址的自定义客户端缓存。如果未指定缓存,则使用 GFactualGeocodeCache。
var geocoder = new GClientGeocoder();
生成一个地址解析器对象。
B、getLatLng(address:String, callback:function)
向 Google 服务器发送请求,对指定的地址进行地址解析。如果地址已成功定位,则用 GLatLng 点调用用户指定的回调函数。否则,向回调函数提供一个 null 点。如果地址不明确,则仅向回调函
数传递最匹配的点。
具体地址解析,下面例子将看到弹出中国上海市的经纬度字符串
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert("无法解析:" + address);
} else {
alert(point.toString());
map.setCenter(point, 13);
map.addControl(new GSmallMapControl());
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
} );
}
showAddress('中国上海市');
5、google.maps.Event类(GEvent类:事件类)
此命名空间包含的函数可用于注册事件处理程序(既处理自定义事件也处理 DOM 事件)和触发自定义事件。此 API 定义的所有事件都是由 GEvent.trigger() 内部触发的自定义事件。静态方法如下
:
A、GEvent.addListener(source:Object, event:String, handler:Function) 返回值为GEventListener
为源对象的自定义事件注册事件处理程序。返回一个可用于最终注销处理程序的句柄。可使用源对象的 this 集合调用事件处理程序。
google.maps.Event.addListener(marker, "click", function(){
marker.openInfoWindowHtml(html);
})
点击标识时弹出提示框。
B、GEvent.addDomListener(source:Node, event:String, handler:Function) 返回值为GEventListener
为源对象的 DOM 事件注册事件处理程序。源对象必须为 DOM 节点。返回一个可用于最终注销处理程序的句柄。可使用源对象的 this 集合调用事件处理程序。此函数将 DOM 方法用于当前浏览器,
来注册事件处理程序。
C、GEvent.removeListener(handle:GEventListener)
删除使用 addListener() 或 addDomListener() 安装的处理程序。
D、GEvent.clearListeners(source:Object or Node, event:String)
删除使用 addListener() 或 addDomListener() 在指定对象上为指定事件安装的所有处理程序。
6、GBrowserIsCompatible()
判断浏览器是否支持GMaps。
以下给出一段GMaps地图使用的代码,中心表示点位北京天安门
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gmaps Test!</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="http://ditu.google.cn/maps?ie=utf-8&oe=utf-8&file=api&v=2.73&key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-
4WZA27OwgbtyR3VcA" type="text/javascript"></script>
<script type="text/javascript"><!--
jQuery(function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map_canvas'));
var marker = new GMarker(new GLatLng(39.9090, 116.3977));
var html = '<div style="width:80px; padding:5px 10px;">'+'北京天安门'+'</div>';
map.setCenter(new GLatLng(39.9, 116.3975), 13);
map.addControl(new GSmallMapControl());
map.addOverlay(marker);
marker.openInfoWindowHtml(html);
google.maps.Event.addListener(marker, "click", function(){
marker.openInfoWindowHtml(html);
})
}
});
//--></script>
</head>
<body>
<p>测试Gmaps</p>
<div id="map_canvas" style="border:1px solid #979797; background-color:#e5e3df; width:600px; height:500px; margin:2em auto;">
<div style="padding:1em; color:gray;">正在加载...</div>
</div>
</body>
</html>
使用时需要注意两点: 一载入你正确的 jquery.js 库。 二是把key换成你网站自己的KEY。 上面的KEY为本地调试使用,必须使用 http://localhost 访问才可用。