免费Google地图API使用说明(转)

01
事件监视 

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

04
  
05
  
06
var map = new GMap(document.getElementById("map")); 

07
GEvent.addListener(map, "moveend", function() { 

08
var center = map.getCenterLatLng(); 

09
var latLngStr = '(' + center.y + ', ' + center.x + ')'; 

10
document.getElementById("message").innerHTML = latLngStr; 

11
}); 

12
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

1
显示信息浮窗 

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

4
  
5
  
6
var map = new GMap(document.getElementById("map")); 

7
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 

8
map.openInfoWindow(map.getCenterLatLng(), 

9
document.createTextNode("Hello world"));

01
地图标注 

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

04
  
05
  
06
// Center the map on Palo Alto 

07
var map = new GMap(document.getElementById("map")); 

08
map.addControl(new GSmallMapControl()); 

09
map.addControl(new GMapTypeControl()); 

10
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 

11
  
12
// Add 10 random markers in the map viewport using the default icon 

13
var bounds = map.getBoundsLatLng(); 

14
var width = bounds.maxX - bounds.minX; 

15
var height = bounds.maxY - bounds.minY; 

16
for (var i = 0; i < 10; i++) { 

17
var point = new GPoint(bounds.minX + width * Math.random(), 

18
bounds.minY + height * Math.random()); 

19
var marker = new GMarker(point); 

20
map.addOverlay(marker); 

21
} 

22
  
23
// Add a polyline with 4 random points. Sort the points by longitude so that 

24
// the line does not intersect itself. 

25
var points = []; 

26
for (var i = 0; i < 5; i++) { 

27
points.push(new GPoint(bounds.minX + width * Math.random(), 

28
bounds.minY + height * Math.random())); 

29
} 

30
points.sort(function(p1, p2) { return p1.x - p2.x; }); 

31
map.addOverlay(new GPolyline(points));

01
响应用户点击 

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

04
  
05
  
06
var map = new GMap(document.getElementById("map")); 

07
map.addControl(new GSmallMapControl()); 

08
map.addControl(new GMapTypeControl()); 

09
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 

10
  
11
GEvent.addListener(map, 'click', function(overlay, point) { 

12
if (overlay) { 

13
map.removeOverlay(overlay); 

14
} else if (point) { 

15
map.addOverlay(new GMarker(point)); 

16
} 

17
});

01
在标记上显示信息浮窗 

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

04
  
05
  
06
// Center the map on Palo Alto 

07
var map = new GMap(document.getElementById("map")); 

08
map.addControl(new GSmallMapControl()); 

09
map.addControl(new GMapTypeControl()); 

10
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 

11
  
12
// Creates a marker whose info window displays the given number 

13
function createMarker(point, number) { 

14
var marker = new GMarker(point); 

15
  
16
// Show this marker's index in the info window when it is clicked 

17
var html = "Marker #<b>" + number + "</b>"; 

18
GEvent.addListener(marker, "click", function() { 

19
marker.openInfoWindowHtml(html); 

20
}); 

21
  
22
return marker; 

23
} 

24
  
25
// Add 10 random markers in the map viewport 

26
var bounds = map.getBoundsLatLng(); 

27
var width = bounds.maxX - bounds.minX; 

28
var height = bounds.maxY - bounds.minY; 

29
for (var i = 0; i < 10; i++) { 

30
var point = new GPoint(bounds.minX + width * Math.random(), 

31
bounds.minY + height * Math.random()); 

32
var marker = createMarker(point, i + 1); 

33
map.addOverlay(marker); 

34
}

01
创建图标 

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

04
  
05
  
06
// Create our "tiny" marker icon 

07
var icon = new GIcon(); 

08
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 

09
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 

10
icon.iconSize = new GSize(12, 20); 

11
icon.shadowSize = new GSize(22, 20); 

12
icon.iconAnchor = new GPoint(6, 20); 

13
icon.infoWindowAnchor = new GPoint(5, 1); 

14
  
15
// Center the map on Palo Alto 

16
var map = new GMap(document.getElementById("map")); 

17
map.addControl(new GSmallMapControl()); 

18
map.addControl(new GMapTypeControl()); 

19
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 

20
  
21
// Creates one of our tiny markers at the given point 

22
function createMarker(point) { 

23
var marker = new GMarker(point, icon); 

24
map.addOverlay(marker); 

25
GEvent.addListener(marker, "click", function() { 

26
marker.openInfoWindowHtml("You clicked me!"); 

27
}); 

28
} 

29
  
30
// Place the icons randomly in the map viewport 

31
var bounds = map.getBoundsLatLng(); 

32
var width = bounds.maxX - bounds.minX; 

33
var height = bounds.maxY - bounds.minY; 

34
for (var i = 0; i < 10; i++) { 

35
createMarker(new GPoint(bounds.minX + width * Math.random(), 

36
bounds.minY + height * Math.random())); 

37
}

01
使用图标类 

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

04
  
05
  
06
// Create a base icon for all of our markers that specifies the shadow, icon 

07
// dimensions, etc. 

08
var baseIcon = new GIcon(); 

09
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 

10
baseIcon.iconSize = new GSize(20, 34); 

11
baseIcon.shadowSize = new GSize(37, 34); 

12
baseIcon.iconAnchor = new GPoint(9, 34); 

13
baseIcon.infoWindowAnchor = new GPoint(9, 2); 

14
baseIcon.infoShadowAnchor = new GPoint(18, 25); 

15
  
16
// Center the map on Palo Alto 

17
var map = new GMap(document.getElementById("map")); 

18
map.addControl(new GSmallMapControl()); 

19
map.addControl(new GMapTypeControl()); 

20
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 

21
  
22
// Creates a marker whose info window displays the letter corresponding to 

23
// the given index 

24
function createMarker(point, index) { 

25
// Create a lettered icon for this point using our icon class from above 

26
var letter = String.fromCharCode("A".charCodeAt(0) + index); 

27
var icon = new GIcon(baseIcon); 

28
icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png"; 

29
var marker = new GMarker(point, icon); 

30
  
31
// Show this marker's index in the info window when it is clicked 

32
var html = "Marker <b>" + letter + "</b>"; 

33
GEvent.addListener(marker, "click", function() { 

34
marker.openInfoWindowHtml(html); 

35
}); 

36
  
37
return marker; 

38
} 

39
  
40
// Add 10 random markers in the map viewport 

41
var bounds = map.getBoundsLatLng(); 

42
var width = bounds.maxX - bounds.minX; 

43
var height = bounds.maxY - bounds.minY; 

44
for (var i = 0; i < 10; i++) { 

45
var point = new GPoint(bounds.minX + width * Math.random(), 

46
bounds.minY + height * Math.random()); 

47
var marker = createMarker(point, i); 

48
map.addOverlay(marker); 

49
}

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

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

04
  
05
  
06
// Center the map on Palo Alto 

07
var map = new GMap(document.getElementById("map")); 

08
map.addControl(new GSmallMapControl()); 

09
map.addControl(new GMapTypeControl()); 

10
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 

11
  
12
// Download the data in data.xml and load it on the map. The format we 

13
// expect is: 

14
// <markers> 

15
//   <marker lat="37.441" lng="-122.141"/> 

16
//   <marker lat="37.322" lng="-121.213"/> 

17
// </markers> 

18
var request = GXmlHttp.create(); 

19
request.open("GET", "data.xml", true); 

20
request.onreadystatechange = function() { 

21
if (request.readyState == 4) { 

22
var xmlDoc = request.responseXML; 

23
var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 

24
for (var i = 0; i < markers.length; i++) { 

25
var point = new GPoint(parseFloat(markers[i].getAttribute("lng")), 

26
parseFloat(markers[i].getAttribute("lat"))); 

27
var marker = new GMarker(point); 

28
map.addOverlay(marker); 

29
} 

30
} 

31
} 

32
request.send(null);

001
API 概要 

002
  
003
  
004
GMap类 

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

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

009
  
010
更多信息请参看GMap类参考 

011
  
012
  
013
  
014
事件 

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

017
  
018
  
019
var map = new GMap(document.getElementById("map")); 

020
GEvent.addListener(map, "click", function() { 

021
alert("You clicked the map"); 

022
}); 

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

024
  
025
  
026
function MyApplication() { 

027
this.counter = 0; 

028
this.map = new GMap(document.getElementById("map")); 

029
GEvent.bind(this.map, "click", this, this.onMapClick); 

030
} 

031
  
032
MyApplication.prototype.onMapClick() { 

033
this.counter++; 

034
alert("You have clicked the map " + this.counter + 

035
this.counter == 1 ?" time.":" times."); 

036
} 

037
  
038
var application = new MyApplication(); 

039
  
040
  
041
信息浮窗 

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

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

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

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

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

052
  
053
  
054
  
055
标注 

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

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

060
  
061
  
062
图标和标记 

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

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

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

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

072
  
073
  
074
var icon = new GIcon(); 

075
icon.image = "http://www.google.com/mapfiles/marker.png"; 

076
icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 

077
icon.iconSize = new GSize(20, 34); 

078
icon.shadowSize = new GSize(37, 34); 

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

080
  
081
  
082
  
083
折线 

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

086
  
087
  
088
var polyline = new GPolyline([new GPoint(-122.1419, 37.4419), 

089
new GPoint(-122.1519, 37.4519)], 

090
"#ff0000", 10); 

091
map.addOverlay(polyline); 

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

094
  
095
  
096
  
097
控件 

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

100
  
101
  
102
GLargeMapControl在Google Map中使用的大缩放/定位控件 

103
GSmallMapControl在Google Map中使用的小缩放/定位控件 

104
GSmallZoomControl一个小的缩放控件(不能定位)，用在小窗口中显示驾驶方向 

105
GMapTypeControl地图类型切换控件(如：地图和卫星图) 

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

107
  
108
  
109
map.addControl(new GLargeMapControl()); 

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

111
  
112
  
113
  
114
XML和RPC 

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

117
  
118
  
119
var request = GXmlHttp.create(); 

120
request.open('GET', "myfile.txt", true); 

121
request.onreadystatechange = function() { 

122
if (request.readyState == 4) { 

123
alert(request.responseText); 

124
} 

125
} 

126
request.send(null); 

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

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

google: api

http://code.google.com/intl/zh-CN/apis/maps/index.html

Google:demo

http://www.google.com/apis/maps/demo/

地理学习小游戏

五岳名山您一定听说过，但您还记得它们分别在哪里吗？在这个小游戏中，您可以根据给出地理名词，将对应的标注拖拽到地图中恰当的位置上。当您完成后，请点击“评判”，程序将自动判断您的回答是否正确，并给出成绩。同时，在查看答案的模式下，点击标注还将弹出该景点的介绍。多练习几次，Google 地图 API 定能让您对它们的位置了如指掌！

多点测距尺

想知道地球上任意两个地点距离多远？想知道您上班走了多远的路？有了Google 地图 API，您可以轻而易举地给地图添加标注和路径，并实现自己的“测距尺”。在这个例子中，您还可以随意地修改现有路径，甚至将“测距尺”包装成自定义的 Google 地图 API控件，和别人分享。

神奇的放大镜

这个放大镜可不是简单地将地图的局部放大：透过它，您能够看到地图上更多的细节。事实上，这是通过两个独立的、显示不同缩放级别的地图控件实现的。只有想不到，没有做不到。如果您熟悉 javascript， Google 地图 API 还有很多新奇的功能等待您的发现！

开发人员指南：

查看示例

http://code.google.com/intl/zh-CN/apis/maps/documentation/premier/guide.html#MapsJS

开始编写 hello world：

http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/tutorial.html

查看示例

Google Maps JavaScript API V3 演示库

http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/demogallery.html

地图叠加层

http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/overlays.html