重要的GMaps对象与接口

不念不忘少年蓝@ 2022-08-05 10:22 236阅读 0赞

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][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
<html xmlns="[http://www.w3.org/1999/xhtml][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][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][http_localhost] 访问才可用。

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml
[http_ditu.google.cn_maps_ie_utf-8_oe_utf-8_file_api_v_2.73_key_ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq]: http://ditu.google.cn/maps?ie=utf-8&amp;oe=utf-8&amp;file=api&amp;v=2.73&amp;key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq
[http_localhost]: http://localhost