当前位置: 首页 > 工具软件 > GMaps.js > 使用案例 >

重要的GMaps对象与接口

臧增
2023-12-01

 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&amp;oe=utf-8&amp;file=api&amp;v=2.73&amp;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 访问才可用。

 类似资料: