Google Maps API 中文说明文档

最新推荐文章于 2024-04-14 20:36:47 发布

AndyDevelope

最新推荐文章于 2024-04-14 20:36:47 发布

阅读量3.5k

点赞数

分类专栏： GIS About Google 文章标签： google api 浏览器 xmlhttprequest html javascript

About Google 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

GIS

2 篇文章 0 订阅

订阅专栏

本文来源于Google由Step1.cn翻译并整理

导言

Google Maps的"Hello World"

看简单的例子是开始学习API的最有效的方法，这个网页在层上居中显示了一个300x300的地图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example - simple</title>
    <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 300px; height: 300px"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap(document.getElementById("map"));
      map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    }

    //]]>
    </script>
  </body>

</html>

你可以点这儿预览这个例子的效果，不过在你上传到自己的网站上运行之前，你必须把其中的"&key="之后的授权码换成自己在Maps API key申请的授权码，否则看不到效果.本网站使用的范例中的授权码只能在Step1.cn域名上使用。

你可以看到，Google Maps使用了一个JavaScript文件(http://maps.google.com/maps?file=api&v=1) 这个文件包含了你在自己的网页上显示Google地图的所有的函数和类. 想要在自己的网页上使用Google Maps API，你必须在网页上通过script标签连接一个包含你申请的授权码的URL:

<script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>

Google Maps API提供的最重要的类是GMap,它代表页面上的地图对象，你可以根据需要在页面上使用多个GMap的实例每个地图被包含在一个HTML的容器(container)里面，比如DIV标签.

下面会讲到如何给地图实例添加和操作标注.

Google Maps并不是对每一个浏览器都兼容的， Google Maps 现在兼容Firefox/Mozilla, IE 5.5+, Safari 1.2+和Opera，不支持IE 5.0.因为每个不兼容的浏览器的动作又是不同的，所以Maps API提供了一个全局的方法(GBrowserIsCompatible())来检查浏览器兼容性，但是并不自动检查. 引入的脚本http://maps.google.com/maps?file=api&v=1可以在几乎所有的浏览器中被正常解析，所以你可以放心的在检查浏览器兼容性之前引入该脚本.

在本文的所有例子之中，除了上面的一篇之外，其他的既没有用GBrowserIsCompatible()检查浏览器兼容性，也没有给出任何错误信息正式使用的程序上应该有更加友好的处理方法，这里为了让这些例子更加易懂，而忽略了浏览器检查.

XHTML和VML

建议你在需要使用地图的网页上使用标准的兼容性好的XHTML,当页面顶端存在DOCTYPE标签时，浏览器会使用"标准兼容模式"来处理页面，这将使页面能更好的跨越浏览器执行.

同样，如果你需要在地图上包含折线，你需要为IE浏览器在页面上引入VML命名空间这样，你的文档开头就应该是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <style type="text/css">
    v/:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>
  </head>

关于VML，你可以在Microsoft's VML workshop查找更多信息.

API更新

引入的JavaScript文件URLhttp://maps.google.com/maps?file=api&v=1指向到 API 的"版本1"，如果API出现了重要的升级，会增加这个版本号并且在Google Code和Maps API讨论组上面发布公告.

Google会同时运行新版和旧版一个月左右，随后旧版就会被关闭.

地图工作小组会在修复BUG或改善性能之后随时更新API，这些更新仅仅是为了改善性能和修复错误，不过在这个工程之中也可能发生影响API连接的情况如果这样的事情发生，你可以到Maps API discussion group报告你遇到的情况

地理、行程和其他

Google Maps API现在并不包含地理和行程服务,可在网上有许多关于free geocoders的相关内容.

应用范例

一个简单例子

创建一个在所在层中居中的地图

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

查看范例(simple.html)

地图的移动和变换

recenterOrPanToLatLng 方法进行一个地图变换，目标点经/纬在当前视口之中时执行一个连续的动作，否则，执行不连续的变换动作

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
  map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);

查看范例(animate.html)

在地图上添加控件

addControl方法可以在地图上添加控件，并且集成了GSmallMapControl(用来缩放和移动图片)和GMapTypeControl(用来在地图和卫星图模式间切换)两个控件.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

查看范例(controls.html)

事件监视

GEvent.addListener用来注册事件监视器，在这个例子中，在用户移动或拖拽地图后，输出地图中心点的经/纬.

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.y + ', ' + center.x + ')';
  document.getElementById("message").innerHTML = latLngStr;
});
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

查看范例(event.html)

显示信息浮窗

这个范例显示一个指向地图中心点的"Hello world"信息浮窗，这里信息浮窗显示在指向点的上面，而实际上，信息窗能在地图的任何地方显示.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
map.openInfoWindow(map.getCenterLatLng(),
                   document.createTextNode("Hello world"));

查看范例(infowindow.html)

地图标注

本范例通过创建10个随机的标注和折线来说明地图标注的用法.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Add 10 random markers in the map viewport using the default icon
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random());
  var marker = new GMarker(point);
  map.addOverlay(marker);
}

// Add a polyline with 4 random points. Sort the points by longitude so that
// the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
  points.push(new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));

查看范例(overlay.html)

响应用户点击

本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
    map.removeOverlay(overlay);
  } else if (point) {
    map.addOverlay(new GMarker(point));
  }
});

查看范例(click.html)

在标记上显示信息浮窗

在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the given number
function createMarker(point, number) {
  var marker = new GMarker(point);

  // Show this marker's index in the info window when it is clicked
  var html = "Marker #<b>" + number + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random());
  var marker = createMarker(point, i + 1);
  map.addOverlay(marker);
}

查看范例(markerinfowindow.html)

创建图标

创建一种新图标,就像在Google Ride Finder上面使用的迷你标记一样.必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates one of our tiny markers at the given point
function createMarker(point) {
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("You clicked me!");
  });
}

// Place the icons randomly in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  createMarker(new GPoint(bounds.minX + width * Math.random(),
                          bounds.minY + height * Math.random()));
}

查看范例(icon.html)

使用图标类

多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用GIcon类的copy方法来构造.这样可以将一个Icon对象的所有属性复制到一个新的Icon对象中.

// Create a base icon for all of our markers that specifies the shadow, icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the letter corresponding to
// the given index
function createMarker(point, index) {
  // Create a lettered icon for this point using our icon class from above
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var icon = new GIcon(baseIcon);
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  var marker = new GMarker(point, icon);

  // Show this marker's index in the info window when it is clicked
  var html = "Marker <b>" + letter + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                         bounds.minY + height * Math.random());
  var marker = createMarker(point, i);
  map.addOverlay(marker);
}

查看范例(iconclass.html)

在地图上使用XML和异步RPC ("AJAX")

在这个范例中，我们下载一个静态文件("data.xml")，这个XML文件中包含一系列经/纬坐标，当下载完成后，读取这个XML文件并为每一个坐标在地图上创建一个标记.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
//   <marker lat="37.441" lng="-122.141"/>
//   <marker lat="37.322" lng="-121.213"/>
// </markers>
var request = GXmlHttp.create();
request.open("GET", "data.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                             parseFloat(markers[i].getAttribute("lat")));
      var marker = new GMarker(point);
      map.addOverlay(marker);
    }
  }
}
request.send(null);

查看范例(async.html)

API 概要

`GMap`类

GMap的每一个实例表现为页面上的一个地图，可以创建这个类的多个实例每个地图被包含在一个container之中，比如一个DIV标签，除非明确指定，地图将使用相应container的大小.

GMap类提供了操作地图点(中心和缩放度)和添加删除标记(比如GMarker和GPolyline实例)和方法. 同时也提供了一个打开"信息浮窗"的方法，地图上同时只能有一个信息浮窗.

更多信息请参看GMap类参考

事件

利用事件监视器，你可以在程序中加入动态的内容，每个实例提供一些指定的事件，你的程序可以利用静态方法GEvent.addListener或GEvent.bind监视这些事件. 例如，以下代码片断在每次用户点击地图的时候显示一个警告:

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "click", function() {
  alert("You clicked the map");
});

GEvent.addListener使用一个函数作为第三个参数，这个函数作为事件处理器，在事件被触发时运行. 如果想绑定一个对象的方法到事件，可以使用GEvent.bind.例如：

function MyApplication() {
  this.counter = 0;
  this.map = new GMap(document.getElementById("map"));
  GEvent.bind(this.map, "click", this, this.onMapClick);
}

MyApplication.prototype.onMapClick() {
  this.counter++;
  alert("You have clicked the map " + this.counter +
            this.counter == 1 ?" time.":" times.");
}

var application = new MyApplication();

信息浮窗

Map类有一个信息浮窗，可以在地图上以浮动窗口模式在地图上显示HTML内容.

基本的浮动窗口方法是openInfoWindow，这个方法以一个点和一个HTML节点作为参数，这个HTML节点被添加到信息浮窗容器里面，并显示在相应点处.

openInfoWindowHtml差不多，但是它使用HTML字符串作为参数. openInfoWindowXslt则利用XML节点和XSLT文档的URL地址来生成信息浮窗内容，如果该XSLT文档还没有被下载，则会自动异步下载此文件.

如果需要在标记上显示信息浮窗，你可以传递第三个参数(可选)给出窗口顶端和给定点位置的像素差. 比如你的标记高度是10px,你可以使用GSize(0,-10)作第三个参数.

GMarker类还提供了openInfoWindow方法用来处理像素值内容，所以不用担心在程序中计算像素的问题.

标注

标注是一些绑定到地理坐标的对象，当移动、缩放地图或切换模式(比如从地图到卫星图)时，标注也会跟着变化.

Maps API提供两种标注:标记(地图上的图标)和折线(根据地理位置绘制的折线)

图标和标记

The GMarker构造函数使用一个图标和一个点作为参数，并提供一些类似"点击"的事件，看这个创建标记的例子

创建标记最困难的地方是指定图标，复杂在于一个图标需要几个不同的图片构成.

每一个图标至少都有一个前景图片和一个阴影图片，阴影必须是前景图的45度视角的形状，并且左下角和前景图的左下角重叠，还必须是24-bit PNG灰度图片，才能刚好使图标看起来像站在地图上一样.

The GIcon需要指定图标使用的图片文件的大小以便以合适的大小显示这些图片，一下是指定一个图标的最基本的代码：

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

The GIcon类提供有超过7个的属性必须设置以保证图标在浏览器上的兼容性和功能. 比如imageMap属性指定图标不透明部分的形状，如果你没有设置这个属性，在Firefox/Mozilla浏览器上，整个图标(包括透明部分)都能被点击. 看这个GIcon类参考了解更多信息

折线

GPolyline构造函数使用一组地理点最为参数，你也能指定颜色、线宽和透明度颜色采用老的HTML样式，比如"#ff0000". GPolyline不支持直接使用颜色名字. 例如以下代码会创建一个10像素宽的红色线段：

var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
                              new GPoint(-122.1519, 37.4519)],
                              "#ff0000", 10);
map.addOverlay(polyline);

在IE浏览器中，我们用VML来绘制折线，而在其他的浏览器之中，我们使用Google服务器上的图片，并在地图变化时重新刷新图片.

控件

addControl用来添加控件，Maps API可以让你在地图上使用如下控件：

GLargeMapControl在Google Map中使用的大缩放/定位控件
GSmallMapControl在Google Map中使用的小缩放/定位控件
GSmallZoomControl一个小的缩放控件(不能定位)，用在小窗口中显示驾驶方向
GMapTypeControl地图类型切换控件(如：地图和卫星图)

例如，要在地图上添加一个缩放/定位控件，你可以在地图初始化时使用如下代码：

map.addControl(new GLargeMapControl());

这样，控件就会被添加到地图的左上角

XML和RPC

Google Maps API提供了一个创建XmlHttpRequest对象的方法，当前可以在IE, Firefox, and Safari上运行正常，如下：

var request = GXmlHttp.create();
request.open('GET', "myfile.txt", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    alert(request.responseText);
  }
}
request.send(null);

你还可以使用静态方法GXml.parse来解析一个XML文档，使用XML字符串作为参数，这个方法对所有的浏览器兼容. 如果本地浏览器不支持XML解析，则会采用一个基于JavaScript的解析器，可是不能保证这个解析器一定能正常的解析.

注意Google Maps API不需要使用XML或XmlHttpRequest因为这是一个纯JavaScript/DHTML的API.

类参考

`GMap`

GMap代表页面上的一个地图对象. 浏览更多信息

构造函数

构造函数	说明
`GMap(container, mapTypes?, width?, height?)`	在当前的HTML容器内创建一个新的地图，如果没有指定，则使用默认的地图类型(`[G_MAP_TYPE, G_SATELLITE_TYPE]`) Creates a new map inside 同样的，如果没有严格指定大小，则会使用HTML容器的大小.

方法

Configuration

方法	说明
`enableDragging()`	启用动态托拽 (默认已经启用)
`disableDragging()`	禁止动态托拽
`draggingEnabled()`	如果动态托拽启用，则返回true
`enableInfoWindow()`	启用信息浮窗 (默认已经启用)
`disableInfoWindow()`	禁止信息浮窗 windows on this map
`infoWindowEnabled()`	如果信息浮窗启用，则返回true

Controls

`addControl(control)`	将给定控件添加到地图
`removeControl(control)`	从地图上移除相应控件

State

方法	说明
`getCenterLatLng()`	返回地图中心点经/纬坐标
`getBoundsLatLng()`	返回地图视口边界 bounds(经/纬坐标)
`getSpanLatLng()`	返回地图视口宽度和高度(用精度和纬度作坐标)
`getZoomLevel()`	返回地图的缩放级别
`centerAtLatLng(latLng)`	将地图中心定位到指定`GPoint`
`recenterOrPanToLatLng(latLng)`	将地图中心定位到指定`GPoint`，如果指定点在视口之中，则执行平滑过渡动作
`zoomTo(zoomLevel)`	缩放到指定的等级，如果指定的等级超出范围，则请求会被忽略.
`centerAndZoom(latLng, zoomLevel)`	自动定位和缩放地图
`getMapTypes()`	返回所有支持的地图类型的数组(例如`G_MAP_TYPE`和`G_SATELLITE_TYPE`)
`getCurrentMapType()`	返回当前使用的地图类型(例如`G_MAP_TYPE`或`G_SATELLITE_TYPE`)
`setMapType(mapType)`	切换到指定的地图类型(例如`G_MAP_TYPE`或`G_SATELLITE_TYPE`)

Overlays

方法	说明
`addOverlay(overlay)`	将指定的标注 (例如`GMarker`或`GPolyline`) 添加到地图
`removeOverlay(overlay)`	从地图上移除指定的标注
`clearOverlays()`	删除所有地图上的标注

Info Window

方法	说明
`openInfoWindow(latLng, htmlElem, pixelOffset?, onOpenFn?, onCloseFn?)`	在指定的地理坐标点显示一个包含指定HTML内容的信息浮窗. `htmlElem`应该是一个HTML DOM对象.如果指定了`pixelOffset` (`GSize`) 则使用给定的像素值调整窗口位置，这样就可以实现在标记上显示信息浮窗，如果指定了`onOpenFn` 则在窗口显示后调用相应的函数，在窗口关闭时会调用`onCloseFn`函数.
`openInfoWindowHtml(marker, htmlStr, pixelOffset?, onOpenFn?, onCloseFn?)`	同于`openInfoWindow`，不过是用HTML字符串做参数，而不是HTML DOM对象.
`openInfoWindowXslt(marker, xmlElem, xsltUri, pixelOffset?, onOpenFn?, onCloseFn?)`	同于`openInfoWindow`, 不过使用XML元素和XSLT文档的URI地址来生成信息浮窗内容，当一个URI地址第一次使用时，该文档会被`GXmlHttp`下载并被缓存.
`showMapBlowup(point, zoomLevel?, mapType?, pixelOffset?, onOpenFn?, onCloseFn?))`	在当前地理位置点`GPoint`显示一个放大，如果`zoomLevel`和`mapType`参数没有被设置，默认使用第1缩放等级和当前正使用的地图类型.
`closeInfoWindow()`	关闭信息浮窗

Events

Event	Arguments	说明
`click`	`overlay, point`	当用户点击一个地图或标注的时候被触发，如果在标注上点击，该标注会作为参数传递到事件处理器，否则会将地图上被点击点的地理坐标作为参数.
`move`	none	在地图移动时触发，在地图被拖拽的时候会持续触发.
`movestart`	none	在地图开始连续的移动时触发，假如地图的移动不是连续的，则不会被触发.
`moveend`	none	在连续或不连续的移动完成时被触发，在连续的移动时，也只是在最后被触发一次.
`zoom`	`oldZoomLevel`, `newZoomLevel`	在地图缩放级别改变时被触发
`maptypechanged`	none
`infowindowopen`	none	在信息浮窗显示后被触发
`infowindowclose`	none	在信息浮窗关闭后被触发
`addoverlay`	`overlay`	在一个标注被添加到地图后被触发
`removeoverlay`	`overlay`	在一个标注从地图上移除时触发，注意：如果调用`clearOverlays`，则不会被触发，参看下面的`clearoverlays`事件
`clearoverlays`	none	在所有的标记都从地图上移除时触发

`GMarker`

GMarker是一种地图标注，在地图上显示一个图标，类构造函数使用GIcon的一个实例和一个点作为参数， GMarker也包含一些比较方便的方法来在标注上显示一个信息浮窗.

构造函数

构造函数	说明
`GMarker(point, icon?)`	在指定的点，用指定的图标显示一个标记，如果没有指定图标，则使用默认的Google Map图标.

方法

方法	说明
`openInfoWindow(htmlElem)`	利用给定的HTML内容在标注上显示一个信息浮窗，`htmlElem`应该是一个HTML DOM实例.
`openInfoWindowHtml(htmlStr)`	同于`openInfoWindow`，但是使用HTML字符串作参数，而不是HTML DOM实例.
`openInfoWindowXslt(xmlElem, xsltUri)`	同于`openInfoWindow`, 不过使用XML元素和XSLT文档的URI地址来生成信息浮窗内容，当一个URI地址第一次使用时，该文档会被`GXmlHttp`下载并被缓存.
`showMapBlowup(zoomLevel?, mapType?)`	在标注上`GPoint`显示一个放大，如果`zoomLevel`和`mapType`参数没有被设置，默认使用第1缩放等级和当前正使用的地图类型.

Events

Event	Arguments	说明
`click`	none	在用户点击标记时被触发
`infowindowopen`	none	标记上的信息浮窗打开后触发
`infowindowclose`	none	标记上的信息浮窗关闭后触发

`GPolyline`

GPolyline代表地图上的折线图，如果可能，折线用浏览器支持的矢量绘图工具绘制，否则调用Google服务器上面的图片来显示折线.

构造函数

构造函数	说明
`GPolyline(points, color?, weight?, opacity?)`	利用给定的地理坐标点数组创建一个`GPolyline`. `color`应该是一个16进制的颜色代码(例如"#0000ff"), `weight`是一个代表线宽像素值得整数,`opacity`是一个0-1之间的小数.

`GIcon`

一个图标指定用来显示在地图上的图片，因为浏览器兼容性的原因，指定一个图标是比较复杂的点这儿浏览更多信息

至少你应该为图标指定image, shadowImage, iconSize, shadowSize, 和iconAnchor属性，才能显示在地图上，如果你要使用信息浮窗，你必须同时指定infoWindowAnchor属性.

构造函数

构造函数	说明
`GIcon(copy?)`	创建一个图标，复制给定图标的属性

属性

属性	说明
`image`	前景图片地址
`shadow`	阴影图片地址
`iconSize`	前景图片大小像素值
`shadowSize`	阴影图片大小像素值
`iconAnchor`	图标在地图上的对应点相对于图片左上角的像素坐标值.
`infoWindowAnchor`	信息浮窗在图片上的对应点相对于图片左上角的像素坐标值.
`printImage`	用来打印的前景图片文件URL地址，应该和`image`大小相同
`mozPrintImage`	用来在Firefox/Mozilla浏览器中打印的前景图片文件URL地址，应该和`image`大小相同.
`printShadow`	用来打印的阴影图片文件URL地址，因为大部分浏览器不支持打印PNG图片，所以应该使用GIF图片.
`transparent`	图标前景图片的透明版本用来捕获IE的点击事件，这个图片应该是一个24-bit的PNG版本图片，使用1%的不透明度，形状和大小都和图标文件相同.
`imageMap`	在非IE的浏览器中用来描述图标文件的可点击区域的一组x/y坐标数组.

`GEvent`

所有的事件注册和触发都由GEvent类来处理，GEvent类的方法都是静态方法，例如，你应该使用GEvent.bind(...)，而不是(new Event()).bind(...).

静态方法

方法	说明
`addListener(source, eventName, listenerFn)`	当指定的事件触发时，调用指定的`listenerFn`函数， `addListener`返回一个变量，这个变量可以作为`removeListener`的参数.
`removeListener(listener)`	移除事件监视器，参数应该是`addListener`的一个返回值.
`clearListeners(source, eventName)`	为给定的事件移除所有的事件监视器
`trigger(source, eventName, args...)`	在指定的源上利用指定参数触发事件
`bind(source, eventName, object, method)`	将给定的对象的给定方法绑定到给定的事件，当给定的时间被触发时，指定的方法就会被调用例如`GEvent.bind(map, "move",this, this.onMapMove)`

`GXmlHttp`

The GXmlHttp提供一个方法用来创建跨浏览器的XmlHttpRequest实例.

静态方法

方法	说明
`create()`	构造一个新的`XmlHttpRequest`实例

`GXml`

The GXml类提供一个以XML格式来解析字符串的静态方法，这个解析器可以在任何浏览器上执行，假如浏览器上没有集成XML解析器，则会自动的使用一个基于Javascript的XML解析器，而这个Javascript的执行过程可能会比较慢.

静态方法

方法	说明
`parse(xmlStr)`	以XML来解析指定的字符串，并返回一个XML DOM.
`value(xmlNode)`	返回一个节点的文本内容，用来解析文本节点.