事件监视
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);
|
1
2
3
4
5
6
7
8
9
|
显示信息浮窗
这个范例显示一个指向地图中心点的
"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"
));
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
地图标注
本范例通过创建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));
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
响应用户点击
本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记.
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));
}
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
在标记上显示信息浮窗
在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.
// 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);
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
创建图标
创建一种新图标,就像在Google Ride Finder上面使用的迷你标记一样.必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.
// Create our "tiny" marker icon
var
icon =
new
GIcon();
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()));
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
使用图标类
多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用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.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);
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);
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
在地图上使用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
);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
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提供两种标注:标记(地图上的图标)和折线(根据地理位置绘制的折线)
图标和标记
TheGMarker构造函数使用一个图标和一个点作为参数，并提供一些类似"点击"的事件，看这个创建标记的例子
创建标记最困难的地方是指定图标，复杂在于一个图标需要几个不同的图片构成.
每一个图标至少都有一个前景图片和一个阴影图片，阴影必须是前景图的45度视角的形状，并且左下角和前景图的左下角重叠，还必须是24-bit PNG灰度图片，才能刚好使图标看起来像站在地图上一样.
TheGIcon需要指定图标使用的图片文件的大小以便以合适的大小显示这些图片，一下是指定一个图标的最基本的代码：
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);
TheGIcon类提供有超过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.
|
3694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
