<!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文件URL

http://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()	删除所有地图上的标注

方法

说明

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之间的小数.

构造函数

说明

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)	返回一个节点的文本内容，用来解析文本节点.

GXslt

The

GXslt

类提供XML的XSLT转化方法.本类可以在任何浏览器上运行，假如浏览器上没有集成XSLT处理器，则会自动的使用一个基于Javascript的XSLT处理器. 而这个Javascript的执行过程可能会比较慢.

静态方法

方法	说明
create(xsltXmlDoc)	利用给定的XML DOM对象，返回一个 GXslt 实例，该XML DOM对象必须是一个XSLT文件.

方法

方法	说明
transformToHtml(xmlDoc, htmlContainer)	转换给定的XML文档，并将HTML结果存入指定的HTML容器内.

GPoint

GPoint

代表一个二维平面点，如果

GPoint

代表一个地理位置，则

是经度,

是纬度，用十进制.

构造函数

构造函数	说明
GPoint(x, y)	利用给定的坐标值创建新 GPoint

属性

属性	说明
x	点的X(水平方向)坐标
y	点的Y(竖直方向)坐标

GSize

GSize

代表一个二维的范围大小值，如果

GSize

是地理的范围，那么

width

代表经度，而

代表纬度.

构造函数

构造函数	说明
GSize(width, height)	利用给定的宽度和高度值创建新的 GSize

属性

属性	说明
width	宽度
height	高度

GBounds

GBounds

表示一个矩形范围. 如果

GBounds

是地理坐标的，则X坐标代表经度，Y坐标代表纬度. 如果矩形范围跨越国际时间线，那"最小坐标"代表矩形范围左上角坐标，而不是两个坐标的数学最小值.

构造函数

构造函数	说明
GBounds(minX, minY, maxX, maxY)	利用给定坐标创建新GBounds

属性

属性	说明
minX	左上角X坐标
minY	左上角Y坐标
maxX	右下角X坐标
maxY	右下角Y坐标

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Google Maps API 中文说明文档

导言

Google Maps的"Hello World"

浏览器兼容性

XHTML和VML

API更新

地理、行程和其他

应用范例

一个简单例子

地图的移动和变换

在地图上添加控件

事件监视

显示信息浮窗

地图标注

响应用户点击

在标记上显示信息浮窗

创建图标

使用图标类

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

API 概要

GMap类

事件

信息浮窗

标注

图标和标记

折线

控件

XML和RPC

类参考

GMap

构造函数

方法

GMarker

构造函数

方法

Events

GPolyline

构造函数

GIcon

构造函数

属性

GEvent

静态方法

GXmlHttp

静态方法

GXml

静态方法

GXslt

静态方法

方法

GPoint

构造函数

属性

GSize

构造函数

属性

GBounds

构造函数

属性

GMap
类