-
开发人员指南
地图基础知识
?
简介
?
Google
地图的“
Hello,
World
”
?
加载
Google
地图
API
?
地图
DOM
元素
?
GMap2
-
基本对象
?
初始化地图
?
加载地图
?
经度和纬度
?
地图属性
?
地图交互
?
信息窗口
简介
任何
Google
地图
API
应用程序中的基础元素都是
“
地图”
本身。
本文档讨论
GMap2
基
础对象的用法和地图操作的基础知识。
Google
地图的“
Hello,
World
”
开始学习
Google
地图
API
最简单的方式是看一个简单的示例。下面的网页显示以北京
的故宫博物院为中心的
p>
500x300
的地图。
xmlns
=
>
http-
equiv
=
content
=
/>
Google Maps
JavaScript API
Example
onload
=
initialize
()
onunload
=
GUnload
()
p>
>
id
=
p>
style
=
wi
dth
:
500px
;
height
:
300px
>
您可以
查看此示例
及下载、编辑和调试该示例,但必须将该文件中的密钥替换为您自
己的
Google
地图
API
密钥
。
(如果注册了特定目录的密钥,也可以将其用于所有子
目录。
)
即使在此简单的示例中,也需要注意五点:
?
使用
script
标签包含
Google
地图
API
JavaScript
。
?
创建名为“
map_canvas
”的
div
元素来包含地图。
?
编写
JavaScript
函数创建“
m
ap
”对象。
??
将地图的中心设置为指定的地理点。
??
从
body
标签的
onLoad
事件初始化地图对象。
下面说明了这些步骤。
加载
Google
地图
API
p>
/maps?file=api&v=2&key=abcdefg
网址指向包含使用
Google
地图
API
所需所有符号和定义的
JavaScript
文件的位置。您的页面必须包含指向此
网址
的
script
标签,使用注册
API
时收到的密钥。在此示例中,该密钥显示为“
abcdefg
”
。
请注意,我们也传递
sensor
参数以指明此应用程序
是否使用传感器来确定用户位置。在
此示例中,
我们将其设为变
量
“
true_or_false
”<
/p>
以强调您
必须
显式地将此值设置为
true
或
false
。
地图
DOM
元素
id
=
p>
style
=
wi
dth
:
500px
;
height
:
300px
>
p>
要让地图在网页上显示,必须为其留出一个位置。通常,我们通过创建名为
< br>
div
的元素并
在浏览器的文档对象模型
(DOM)
中获取此元素的引用执行此操作。
在
上述示例中,我们定义名为“
map_canvas
”的
div
,并使用样式属性设置其尺寸。地图
会自动使用容器尺寸调整自身的尺寸,
除非使用构造函数中的<
/p>
GMapOptions
显式地为地
图指定尺寸。
GMap2 -
基本对象
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
GMap2
类是表示地图的
JavaScript
类。此类的对象在页面上定义单个地图
。
(可以创建
此类的多个实例,
每个对
象将在页面上定义一个不同的地图。
)
我们使用
JavaScript
new
操
作符创建此类的一个新实例。
p>
当创建新的地图实例时,
在页面中指定一个
DOM
节点
(通常是
div
元素)
作为地图的容
器
。
HTML
节
点
是
JavaScript
document
对
象
的
子
对
象
,
而
且
我
们
通
过
mentById()
方法获得该元素的引用。
此代码定义了一个变量
(名为
map
)
,
并将新<
/p>
GMap2
对象赋值给该变量。
函数
GMap2()
称为“构造函数”
,其定义(在
Google
地图
API
参考
中简述)如下所示:
构造函数
GMap2(container,
opts?)
说明
在通常是一个
DIV
元素的指定
HTML
container
内创建新地图。
您也可以通过
opts
参数传递
GMap2Options
类型的可选参数。
请注意因为
JavaScript
是松散类型的语言,我们可以不填写构造函数的任何可选参数,此
处也未这样做。
初始化地图
map
.
setCenter
(
new
GLatLng
(
3
9.9493
,
116.3975
),
13
);
通过
GMap2
构造函数创建地图后,我
们需要再做一件事:将其初始化。初始化通过地图
的
setCenter()
方法完成。
setCenter()
方法要求有
GLatLng
坐标和缩放级别,<
/p>
而且
必须
先发送此方法,然后再在地图上
执行其他任何操作,包括设置地图本身的其他任何属性。
加载地图
onload
=
initialize
()
onunload
=
GUnload
()
p>
>
当
HTML
页面显示时,文档对象模型
(DOM)
即会扩展,接收其他外部图像和脚本并将
其合并到
document
对象中。
为确保我们的地图仅放置在完全加载后的页面上,
我们仅在
HTML
页面的
元素收到
onload
事件后才执行构造
GMap2
对象的函数。这
样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。
onload
属性是事件处理程序的示例。
Google
地图
API
还提供了大量事件可以用来“监
听”状态变化。请参阅
地图事
件和事件监听器
以了解更多信息。
GUnload()
函数是用来防止
内存泄漏
的实用工具函数。
经度和纬度
既然现在已经有地图了,
我们还需要一种方法来引用地图上的位置。在
Google
地图
API
中,
GLatLng
对象提供了此类机制。可以构造一个
GLatLng
对象,按照制图学的惯例以
{
经度
,
纬度
}
的顺序传递参数:
var
myGeographicC
oordinates
=
new
GLatLng
(
myLatitude
,
myLongitude
)
注意:将“地址”转变为地理点的过程称为“地址解析”
,将在
“
Google
地图
API
服务”
部分中详细讨论。
就像它可用于轻松地引用地理点一样,
它也可用于定义对象的地理边界。<
/p>
例如,
地图在称为
视口的窗口内显示整个
世界的当前“窗口”
。此视口可以通过四个角上的矩形点来定义。
GLatLngBounds
对象提供了这个功能,
通过使用分别表示边界框的西南角和东北角的两个
GLatLng
对象定义一个矩形区域来实现。
GLatLng
对象在
Google
地图
API
中用途广泛。例如,
GMarker
对象在其构造函数中
具有
GLatLng
,并在地图上的指定地理位置放置标记
“叠加层”
。
下面的示例使用
getBounds()
返回当前视
口,
然后在地图上的这些边界内随机放置
10
个
标记:
function
initialize
()
{
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setCenter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
// Add 10
markers to the map at random locations
var
bounds
=
map
.
getBounds
()
;
var
southWest
=
bounds
.
getSouthWest
();
var
northEast
=
bounds
.
getNorthEast
();
var
lngSpan
=
< br>northEast
.
lng
(
)
-
so
uthWest
.
lng
();
var
latSpan
=
< br>northEast
.
lat
(
)
-
so
uthWest
.
lat
();
for
(
var
i
=
0
;
i
<
10
;
i
++)
{
var
point
=
new
GLatLng
(
southWest
.
l
at
()
+
latSpan
*
< br>Math
.
random
(),
southWest
.
lng
()
+
lngSpan
*
< br>Math
.
random
())
;
map
.
a
ddOverlay
(
new
GMarker
(
point
));
}
}
查看示例
()
注意:有关
GMarker
对象的详细信息位于
叠加层
部分中。
地图属性
默认情况下,
在
Google
地图
API
中,
地图使用标准的
“绘制”
图块显示。
但是,
地图
API
也支持其他地图类型。以下是标准地图类型:
?
?
?
?
用
G_NORMAL_MAP
-
默认视图
G_SATELLITE_MAP
-
显示
Google
地球卫星图像
G_HYBRID_MAP
-
混合显示普通视图和卫星视图
G_DEFAULT_MAP_TYPES
-
这三个类型的数组,在需要重复处理的情况下非常有
可以使用
GMap2
对象的
setMapType()
方法设置
地图类型。
例如,
下面的代码将地图设
置为使用
Google
地球的卫星视图:
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setMapType
(
< br>G_SATELLITE_MAP
);
地图还包含对了解情况非常有用的大量属性。
例如,
要
了解当前视口的尺寸,
可使用
GMap2
对象的
getBounds()
方法来返回
GLatLngBounds
值。
每个地图还包含一个“缩放级别
”
,用于定义当前视图的分辨率。在普通地图视图内,可以
使用
0
(最低缩放级别,在地图上可以看
到整个世界)到
19
(最高缩放级别
,可以看到独
立建筑物)
之间的缩放级别。
缩放级别因所查看地区而异,
因为地球上某些地区的数据比其
他地区更详细。在卫星视图中可以使用多达
20
个缩放级别。
可以通过使用
GMap2
对象的
getZoom()
方法检索地图当前使用的缩放级别。
关于缩放级别、
地图图块以及创建自己的自定义地图类型的更多信息,
< br>请参阅
图块叠加层
部
分。
地图交互
既然现在有了
GMap2
对象,就可以与之进行交
互了。基本地图对象的外观和行为与您在
Google
p>
地图网站上交互的地图非常相似,
并带有大量内置行为。
GMap2
对象还提供了大
量配置方法来改变地图对象本身的行为。
默认情况下,
和在
上一样,
地
图对象会对用户的活动做出反应。
但
您可以使用大量实用工具方
法改变此行为。
例如,
eDragging()
方法禁止了
点击并拖拽地图到新位置的功能。
您还可以通过编程与地图交互。
GMap2
对象支持可以直接改变地图状态的大量方法。
例如,
setCenter()
、
panT
o
和
zoomIn()
方法通过编程来操
作地图,
而不是通过用户交互来操作
地图。
下面的示例显示一个地图,等待两秒钟,然后平移到新中心点。
< br>panT
o
方法将地图中心设
置在指定点处。
如果指定点位于地图的可见部分,
则地图会平稳地平移到该点,
否则会跳至
该点。
p>
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setC
enter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
w
indow
.
setTimeout
(
function
()
{
p>
map
.
panT
o
(
new
GLatLng
(
39.927
,
p>
116.407
));
},
1000
);
查看示例
()
可以通过使用
Google
地图
API
事件
进行更复杂的交互。
信息窗口
所有使用
Google
地图
API
的地图都有可能显示类型为
GInfoWindow
的单个“信
息窗
口”
,该窗口在地图上端以浮动窗口显示
< br>
HTML
内容。信息窗口有点像漫画书上的文字气<
/p>
球;它有一个内容区域和锥形引线,引线的头在地图的指定点上。点击
Google
地图
上的
标记可以看到活动的信息窗口。
GInfoWindow
对象没有构
造函数。当创建地图时,会自动创建一个信息窗口并将其附加
到地图上。
对于指定的地图,
一次不能显示多个信息窗口,
但可以
移动信息窗口并可以更改
其内容(如果需要)
。
GMap2
对象提供了
openInfoWindow()
方法,该方法将一个点和一个
HTML DOM
元
素作为参数。
HTML
DOM
元素附加到信息窗口容器中,信息窗口的尖端会固定在
指定点
上。
GMap2
的
openInfoWindowHtml()
方法相似,但是它使用
HTML
字符串作为其第二
个参数而不是
DOM
元素。
要创建信息窗口,
请调用
openInfoWindow
方法,
并向其传递位置和要显示的
DOM
元
素。下面的示例代码显示了
一个信息窗口,该窗口锚定在地图中心,内容为一条简单消息
“
Hello, world
”
。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setC
enter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
m
ap
.
openInfoWindow
(
map
.
getCenter
(),
document
.
createT
extNode
(
));
查看示例
()
有关信息窗口的完整文档,请查阅
Google
地图
API
参考
事件
?
地图事件概述
?
事件监听器
?
在事件监听器中使用闭包
?
在事件中使用传递的参数
?
将事件绑定到对象
?
监听
DOM
事件
?
删除事件监听器
地图事件概述
浏览器中的
JavaScript
是“事件驱动的”
,这表示
JavaScript
通过生成事件来响应交互,
并期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创
建在
DOM
内传播的事件。对某些事件感兴趣的程序会为这些事件注册
JavaScript
事件
监听器<
/p>
,并在接收这些事件时执行代码。
Google
地图
API
通过为地图
API
对象定义自定义事件而添加到此事件模型中。
请注意,
地图
API
事件是独立的,与标准
DOM
事件不同。但是,由于不同的浏览器实现不同的
DOM
事件模型,因此地图
API
还提供监听和响应这些
DOM
事件但无需处理各种跨浏
览器
特性的机制。
事件监听器
通过使用
GEvent
命名空间中的实用工具
函数注册事件监听器,
来处理
Google
地图
API
中的事件。每个地图
API
对象都导出大量已命名的事件。例如,
GMap2
对象导出
p>
click
、
dblclick
和
move
事件,以及其他许多事件。
每个事件都在指定的环境下发生,并且可以
传递标识环境的参数。
例如,
当用户在地图对象中移动鼠标时,
会触发
mousemove
事
件,
并且该事件会传递鼠标所在地理位置的
GLatLng
。
有关
GMap2
事件及其生成的参数的完整列表,请参见
。
注册用来获取这些事件的相关通知的监听器,请使用静态方法
tener()
。该
方法有三个参数,
一个对象,
一个待监听事件以及一个在指定事件发生时调用的函
数。
例如,
每当用户点击地图时
,
p>
下面的代码段都会显示警告
:
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setC
enter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
G
Event
.
addListener
(
map
,
,
function
()
{
p>
alert
(
您点
击了地图。
);
});
查看示例
()
监听器也能够捕获事件的环境。
在下面的示例代码中,
显示用户拖动地图后地图中心的经度
p>
和纬度。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
GEvent
.
a
ddListener
(
map
,
p>
,
function
()
{
var
center
=
map
.
getCenter
()
;
do
cument
.
getElementById
(
).
innerHTML<
/p>
=
center
.
toString
();
});
map
.
setCenter
(
new
p>
GLatLng
(
39.9493
,
116.3975
),
13
);
查看示例
()
在事件监听器中使用闭包
当执行事件
监听器时,一个常用的好方法就是将私有数据和持久性数据附加到一个对象。
JavaS
cript
不支持“私有”实例数据,但它却支持
闭包
,闭包允许内部函数访问外部变量。
在事件监听器中,访问通常不附加
到发生事件的对象的变量时,闭包非常有用。
下面的示例在事
件监听器中使用函数闭包将加密消息分配给一组标记。
点击每个标记都可以
看到加密消息的一部分,该消息并不包含在标记自身内部。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setC
enter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
// Creates a marker at the given
point
// The five markers
show a secret message when clicked
// but that message is not within the
marker's instance data
function
createMa
rker
(
point
,
number
)
{
var
marker
=
new
GMarker
(
point
);
var
message
=
< br>[
这
,
是
,
个
,
< br>
秘密
,
消息
];
marker
.
value
=
number
;
GEvent
.
addListener
(
marker
< br>,
,
function
()
{
var
myHtml
=
+
number
+
+
message
[
number
-
1
];
p>
map
.
openInfoWindowH
tml
(
point
,
myHtml
);
});
return
marker
;
}
//
Add 5 markers to the map at random
locations
var
bounds
=
map
.
getBounds
()
;
var
southWest
=
bounds
.
getSouthWest
();
var
northEast
=
bounds
.
getNorthEast
();
var
lngSpan
=
< br>northEast
.
lng
(
)
-
so
uthWest
.
lng
();
var
latSpan
=
< br>northEast
.
lat
(
)
-
so
uthWest
.
lat
();
for
(
var
i
=
0
;
i
<
5
;
i
++)
{
var
point
=
new
GLatLng
(
southWest
.
l
at
()
+
latSpan
*
< br>Math
.
random
(),
southWest
.
lng
()
+
lngSpan
*
< br>Math
.
random
())
;
ma
p
.
addOverlay
(
createMarker
(
point
,
i
+
1
));
}
查看示例
()
在事件中使用传递的参数
地图
API
事件系统中的许多事件在触发事件时都会传递参数。例如,如果地图点击发生在
叠加层
上,
GMap2
“点击”事件会传递
overlay
和
overlaylatlng
p>
;否则,它传递地图坐
标的
latlng
。可以通过将指定的符号直接传递给事件监听器中的函数来访问
这些参数。
在下面的示例中,我们首先进行测试,即检查是否定义了
latlng
参数,以确保点击发生
在
地图图块上;
这样,
我们就可以在坐
标点的上方打开一个信息窗口,
并在信息窗口中显示转
化为像素
的坐标以及地图的缩放级别。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setCenter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
GEvent
.
addListene
r
(
map
,
,
function
(
overlay
,
latlng
)
{
if
(
la
tlng
)
{
var
myHtml
=
为
:
+
map
.
fromLatLngT
oDivPixel
< br>(
latlng
)
+
缩放级别
:
+
map
.
getZoom
();
p>
map
.
openInfoWindow<
/p>
(
latlng
,
myHtml
);
}
});
map
.
addControl
(
new<
/p>
GSmallMapControl
());
//
增加控制条
map
.
addControl
(
new
GMapTypeControl
());
//
增加卫星地图和普通地图的显示
查看示例
()
将事件绑定到对象方法
当您希望将事
件监听器附加到对象的特定实例时,
函数非常有用。
如果您不希
望这样,
而是
希望响应事件时对象的所有实例都调用某方法
p>
,
可以使用
()
。
在下面的示例中,
MyApplic
ation
的实例将地图事件与其成员方法绑定在一起,
当触
发事件时会修改类状态:
function
MyApplication
()
{
thi
s
.
counter
=
0
;
this
.
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
this
.
p>
map
.
setCenter
(
new
GLatLng
(
39.9493
,
< br>
116.3975
),
13
);
GEvent
.
bind
(
this
.
map
,
,
this
,
this
.
onMapClick
);
}
p>
MyApplication
.
proto
type
.
onMapClick
=<
/p>
function
()
{
thi
s
.
counter
++;
alert
(
这是您第
+
this
.
counter
+
+
次点击
}
var
application
=
new
MyApplication
();
查看示例
()
监听
DOM
事件
Google
地图
API
事件模型创建并管理自己的自定义事件。但是,
DOM
也会根据当前使
用的特定浏览器事件模型创建和调度自己的事件。
p>
如果您希望捕获并响应这些事件,
Google
地图
API
提供的独立于浏览器的包装器可以监听和绑定
DOM
事件而不需要自定义代
码。
Listener()
静态方法为
DOM
节点上的
DOM
事件注册事件处理程序。
同样,
m()
静态方法允许您为类实例上的
DOM
事件注册事件处理程序。
删除事件监听器
不再需要事件监听器
时,
应将其删除。
甚至在事件只需触发一次的情况下,
也可能需要删除。
删
除
闭
包
内
的
匿<
/p>
名
函
数
所
定
义
的
事
件
监
听
器
可
能
很
困
难
。
但
是
,
addListener()
、
ad
dDomListener()
、
bind()
和
bindDom()
函数会返回
GEventListener
句柄,可用来
最终取消注册处理程序。
下面的示例通过在地图上放置标记来响应点击。
任何后续点击都
可删除事件监听器。
请注意,
这会导致不再执行
removeOverlay()
代码。
另请注意,
您甚至可以从事件监听器自身内部<
/p>
删除事件监听器。
function
MyApplication
()
{
thi
s
.
counter
=
0
;
this
.
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
this
.
p>
map
.
setCenter
(
new
GLatLng
(
39.9493
,
< br>
116.3975
),
13
);
var
myEventListener
=
GEvent
.
bind
(
this
.
map
,
,
this
,
function
(
overlay
,
latlng
)
{
if
(<
/p>
this
.
counter
==
0
)
{
if
(
la
tlng
)
{
this
.
map
.
addOverlay
(
p>
new
GMarker
< br>(
latlng
))
thi
s
.
counter
++;
}
else
if
(
ov
erlay
instanceof
GMarker
)
{
this
.
removeOverlay
(
marker
< br>)
}
}
else
{
GEvent
.
removeListener
(
myEventList
ener
);
}
});
}
function
load
()
{
var
application
=
new
MyApplication
();
}
查看示例
()
控件
?
地图控件概述
?
向地图添加控件
?
在地图上放置控件
?
修改标准控件的结构
?
创建自定义控件
控件概述
上的地图包含允许用户与地图交互的
UI
元素,这些元素称为“控
件”<
/p>
。您可以在
Google
地图
API
应用程序中添加这些控件的多种组合。您还可以通过子
类化
GControl
类来构建自己的自定义控件。
地图
API
带有大量可以在地图中使用的内置控件:
?
GLargeMapControl
-
一个在
Google
地图上使用的大平移
/
缩放控件。默认情况
下显示在地图的左上角。
?
GSmallMapControl
-
一个在
Google
地图上使用的小一点的平移
/
缩放控件。默
认情况下显示在地图的左上角。
?
GSmallZoomControl
-
小型缩放控件(无平移控件)
,用于在
Google
地图上显
示行车路线的
小地图弹出窗口。
?
GScaleControl
-
地图比例尺
?
GMapTypeControl
-
让用户切换地图类型(例如“地图”和“卫星”
)的按钮
?
GHierarchicalMapTypeControl
-
用于放置多个地图类型选择器的一组精选的嵌
套按钮和菜单项。
?
GOverviewMapControl
-
位于屏幕一角的可折叠概览地图。
所有这些控件都基于
GControl
对象。
GMapTypeControl
和
GHierarchicalMapTypeControl
是特殊情况,因为它们还可以进
行
配<
/p>
置
。
这
些
控
件
增
加
的
功
能
可
以
更
改
Google
地
图
API
中
的
地
图
p>
当
前
所
用
的
GMapType
。有关配置这些控件的详细信息,请参见
修改标准控件的结构
。
下面是当前支持的地图类型列表:
?
G_NORMAL_MAP
显示
Google
地图默认的普通二维图块
?
G_SATELLITE_MAP
显示拍摄的图块
?
G_HYBRID_MAP
同时显示
拍摄的图块和普通(突出显示道路、城市名等明显地图
特征)图块
?
G_PHYSICAL_MAP
根据地形信息显示实际地图图块
如果
您有图像或者已经定义好的叠加层,也可以定义自己的
自定义地图类型
< br>。
默
认
情
况
下
,
G
oogle
地
图
API
提
供
三
种
地
图
类<
/p>
型
:
G_NORMAL_MAP
、
G_SATELLITE_MAP
和
G_HYBRID_MAP
。您可以通过这两种方式来改变地图上可用的地
图类型:使用
MapType()
删除地图类型;使用
Type()
添加地图类型。无论您
何时创建地图类型控件,它都使用当前地图上已经添加的地图类型,
并通过控件让用户可
以切换这些地图类型。请注意,您必须在添加地图类型控件(主要指
< br>GHierarchicalMapTypeControl
)之前指定各地图类
型之间的阶层关系,以便地图类型控
件可以准确反映这些关系。
使用下面的代码可将
G_HYBRID_MAP
从添加到
地图上的可用地图类型中删除,只剩下两
种地图类型。添加
GMapTypeControl
后,便只有这两种地图类型可用。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
),
{
size
:
new
GSize
< br>(
640
,
320
)
}
);
map
.
removeMapType
(
G_
HYBRID_MAP
);
map
.
s
etCenter
(
new
GLatLng
(
39.927
,
116.407
),
11
);
var
mapControl
=
new
GMapTypeContr
ol
();
map
< br>.
addControl
(
ma
pControl
);
map
.
addControl
(
< br>new
GLargeMapControl
());
查看示例
()
向地图添加控件
可以使用
GMap2
方法
addControl()
向地图添
加控件。
例如,
要将
Google
地图上显示
的平移
p>
/
缩放控件添加到您的地图中,您可以在您的地图初始化代码中添加
下面这行语句:
map
.
addControl
(
new
< br>
GLargeMapControl
());
可
以
向
地
图
添
加
< br>多
个
控
件
。
在
本
例
中
,
我
们
添
p>
加
内
置
GSmallMapControl
和
GMapTypeControl
控
件,它们分别可以平移
/
缩放地图以及切换“地图”与“卫星”
这两
种类型。在地图中添加标准控件后,它们即刻完全生效。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
addC
ontrol
(
new
GSmallMapControl
());
p>
map
.
addControl
(
new
GMapTy
peControl
());
map
.
setCenter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
查看示例
()
在地图上放置控件
addControl
方法有第二个可选的参数
GCont
rolPosition
,可用于指定控件在地图上的位
置。它
可以是以下值之一,这些值分别指定要放置控件的地图某个角:
?
?
?
?
G_ANCHOR_TOP_RIGHT
G_ANCHOR_TOP_LEFT
G_ANCHOR_BOTTOM_RIGHT
G_ANCHOR_BOTTOM_LEFT
如果不包含此参数,则地图
API
会使用控件指定的默认位置。
GControlPosition
还可以指定偏移量,来指示控件的放置位置与地图边界间隔多少像素。
这些偏移量使用<
/p>
GSize
对象指定。
本示例会将
GMapTypeControl
添加到地图的右上角,
填充为
10
个像素。
双击地图上的
任何位置可以删除该控件,将其放在地图的右下角。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
));
var
mapTypeControl
=
new
GMapTypeContr
ol
();
var
topRight
=
new
GControlPosit
ion
(
G_ANCHOR_TOP_RIGHT
,
new
GSize
(
10
,
10
));
var
bottomRight
=
new
GControlPosit
ion
(
G_ANCHOR_BOTTOM_RIGHT
,
new
GSize
(
10
,
10
));
map
.
addControl
(
p>
mapTypeControl
,
topRight
);
GEvent
.
addListener
(
map
,
,
function
()
{
p>
map
.
removeControl
p>
(
mapTypeControl
);
p>
map
p>
.
addControl
(
new
GMapTypeControl
(),
bottomRight
);
});
map
.
addControl
(
new<
/p>
GSmallMapControl
(
));
map
.
setCenter
(
new
<
/p>
GLatLng
(
39.9493
,
116.3975
),
13
);
查看示例
()
请参见
GControlPosition
类参考
以了解详细信息。
修改标准控件的结构
Google
地图
API
内的大多数控件都提供具有标准行为的简单控件。但是,有些控件需要
初始化才能正常
使用。
例如,
GHierarchicalMapTypeCo
ntrol
通常需要一定的初始化才能
在层叠“菜单”中以正确顺序显示地图类型。
此示例将带有十字准线图块层叠加层的
G_PHYSICAL_MAP
地图
类型添加到地图中,
然后
创建
GHierarchicalMapTypeControl
来排列添加到地图的其他地图类型。
// define the
crosshair
(标准线)
tile layer and its required
functions
var
crossLayer
=
new
GTileLayer
(
new
GCop
yrightCollection
(
),
0
,
15
);
crossLayer
.
getTil
eUrl
=
function
(
tile
,
p>
zoom
)
{
return
;
}
crossLayer
.
isPng
=
function
()
{
return
true
;}
// Create a new map type
incorporating the tile layer
var
layerT
erCross
=
[
G_PHYSICAL_MAP<
/p>
.
getTileLayers
()[<
/p>
0
],
crossLayer
];
var
mtT
erCross
=
new
GMapType
(
layerT
erCross
< br>,
G_PHYSICAL_MAP
.
getProjectio
n
(),
er+
);
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
),
{
size
:
new
GSize
< br>(
640
,
320
)
}
);
map
.
addMapType
(
G_PHY
SICAL_MAP
);
map
p>
.
addMapType
(
mtT
erCross
);
map
.
setCenter
(
new
GLatL
ng
(
39.9493
,
116.3975
),
4
);
var
mapControl
=
new
GHierarchical
MapTypeControl
();
// Set up map type menu
relationships
elationships
();
ationship
(
G_SATELLITE_MAP
,
G_HYBRID_MAP
,
文字标记
,
false
);
<
/p>
ationship
(
G_PHYSIC
AL_MAP
,
mtT
erCross
,
十字交叉
);
// Add control after you've
specified the relationships
map
.
addControl
(
p>
mapControl
);
map
.
a
ddControl
(
new
GLargeMapControl
());
查看示例
()
自定义地图控件
Google
地图
API
还允许您通过子类化
GControl
来创建自定义地图控件。
(您并没有在
JavaScript
中实现一个“子类化”对象,而是把这个对象的
prototype
指定为
GControl
对象的实例。
)
要创建可用的自定义控件,您需要实现在
该类中定义的至少两个方法
:
initialize()
和
getDefaultPosit
ion()
。
initialize()
方法必须返回
DOM
元素,而
getDefaultPosition()
方法必须返回类型为
GControlPosition
的对象。
所有自定义的地图控件中的
DOM
元素最终都应该添加到地图容器(也是
DOM
元素)
中去,这个地图容器可以通过
GMap2
getContainer()
方法获得。
在此示例中,我们创建一
个简单的缩放控件,它具有文本链接,而不是标准
Google
地图
缩放控件中使用的图形图标。
// A T
extualZoomControl is a
GControl that displays textual
// and
// Google
Maps).
// We
define the function first
function
T
extualZoomControl
()
{
}
// T
o
// an instance of the
GControl object
T
extualZoomControl
.
prototype<
/p>
=
new
GControl
();
// Creates a one DIV for
each of the buttons and places them in a
container
// DIV which is
returned as our control element. We add the
control to
// to the map
container and return the element for the map class
to
// position
properly.
T
extual
ZoomControl
.
prototype
.
initialize
=
function
(
map
)
{
var
container
=
document
.
createElement<
/p>
(
);
var
zoomInDiv
=
document
.
createElement<
/p>
(
);
this
.
setButtonStyle_
(
zoomInDiv
);
container
.
appendChild
(
zoomInDiv
);
zoomInDiv
.
appendChild
(
document
.
createT
extNode
(
放大
< br>));
GEvent
.
addDomListener
(
zoomInDiv
,
,
function
()
{
map
.
zoomIn
();
});
var
zoomOutDiv
=
document
.
createElement
(
);
this
.
setButtonStyle_
(
zoomOutDiv
p>
);
container
.
appendChil
d
(
zoomOutDiv
);
zoomOu
tDiv
.
appendChild
(
document
.
createT<
/p>
extNode
(
缩小
));
GEvent
.
addDomListener
(
zoomOutDiv<
/p>
,
,
function
()
{
map
.
zoomOut
();
});
map
.
getContainer
().
ap
pendChild
(
container
);
return
container
;
}
//
By default, the control will appear in the top
left corner of the
// map
with 7 pixels of padding.
T<
/p>
extualZoomControl
.
prototype
.
getDefaultPosition
=
function
()
{
return
new
GControlPosit
ion
(
G_ANCHOR_TOP_LEFT
,
new
GSize
(
7
,
7
));
}
//
Sets the proper CSS for the given button
element.
T
extualZ
oomControl
.
prototype
< br>.
setButtonStyle_
=
< br>
function
(
butt
on
)
{
button
.
style
.
textDeco
ration
=
;
button
.
style
.
color
=
;
button
.
style
.
backgrou
ndColor
=
;
button
.
style
.
font
=
;
button
.
style
.
border
p>
=
;
button
.
style
.
padding
=<
/p>
;
button
.
style
.
marginBo
ttom
=
;
button
.
style
.
textAlign
=
;
button
.
style
.
width
=
;
button
.
style
.
cursor
=
p>
;
}
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
addC
ontrol
(
new
T
extualZoomControl
());<
/p>
map
.
se
tCenter
(
new
GLatLng
(
37.441944
,
-
122.1419
44
),
13
);
查看示例
()
地图叠加层
?
地图叠加层概述
?
标记
?
?
?
?
可拖动的标记
图标
自定义图标
标记管理器
?
折线
?
绘制折线
?
测地折线
?
编码折线
?
多边形
?
底面叠加层
?
图块叠加层
?
图块层叠加层
?
自定义地图类型
Google
地图坐标
版权
投影
?
层
?
自定义叠加层
地图叠加层概述
叠加层是地图上绑定
到经度
/
纬度坐标的对象,会随您拖动或缩放地图而移动。叠加
层用于
反映您“添加”到地图上以指明点、线或区域的对象。
。
地图
API
有如下几种叠加层:
?
地图上的点使用
< br>标记
来显示,
通常显示自定义图标。
标记是
GMarker
类型的对象,
并且可以利用
GIcon
类型的对象来自定义图标。
?
地图上的线使用
< br>折线
(表示点的集合)来显示。线是类型为
GPolyline
的对象。
?
地图上的区域显示为
多边形
(如果是任
意形状的区域)或
底面叠加层
(如果是矩形
区域)
。多边形类似于闭合的折线,因此可以是任何形状。地面叠加层通常用于地图
上
与图块有直接或间接关联的区域。
?
地
图
p>
本
身
使
用
图
块
叠
加
层
显
示
。
< br>如
果
您
有
自
己
的
系
列
图
块
,
可
p>
以
使
用
GTileLayerOverlay
类来改变地图上已有的图块,
甚至可以使用
GMapType
来创建您
自己的地图类型。
?
信息窗口
也是一种特殊的叠加层。但是请注意,信息窗口会自动添加到地图中,并
且地图只能添加
一个类型为
GInfoWindow
的对象。
每个叠加层都实现
GOverlay
接口。可以使用
rlay()
方法向地图添加叠
加层,使用
Overlay()
方法删除叠加层
。
(请注意,默认情况下信息窗口
会自动添加到地图。
)
标记
标记标识地图上的点。
默认情况下,
它们使用
p>
G_DEFAULT_ICON
(您也可
以指定自定义图
标)
。
GMarker
构造函数将
GLatLng
和
GMarkerOptions<
/p>
(可选)对象作为参数。
标记设计为可
交互。
例如,
默认情况下它们接收
事件,
常用
于在事件侦听器中打开
信息窗口。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
setC
enter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
// Add 10 markers to the
map at random locations
var
bounds
=
map
.
getBounds
()
;
var
southWest
=
bounds
.
getSouthWest
();
var
northEast
=
bounds
.
getNorthEast
();
var
lngSpan
=
< br>northEast
.
lng
(
)
-
so
uthWest
.
lng
();
var
latSpan
=
< br>northEast
.
lat
(
)
-
so
uthWest
.
lat
();
for
(
var
i
=
0
;
i
<
10
;
i
++)
{
var
point
=
new
GLatLng
(
southWest
.
l
at
()
+
latSpan
*
< br>Math
.
random
(),
southWest
.
lng
()
+
lngSpan
*
< br>Math
.
random
())
;
map
.
addOverlay
(
new
p>
GMarker
(
point
));
}
查看示例
()
可拖动的标记
标记是可以点击和拖动
到新位置的交互式对象。
在此示例中,
我们将一个可拖动的标记
放置
在地图上,
并监听它的几个较简单事件。
< br>可拖动标记通过实现以下四类事件来表示其拖动状
态:
c
lick
、
dragstart
、
p>
drag
和
<
/p>
dragend
。默认情况下,标记可点击但不可拖动,所以它<
/p>
们需要通过将额外的标记选项
draggable
设置为
true
< br>来初始化。
可拖动标记拖动结束后
默认有弹跳效果。如果
不喜欢这种效果,请将
bouncy
选项设置为
false
,标记会平缓放
下。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
var
center
=
new
GLatLng
(
39.9493
,
116.3975
);
map
.
setCenter
(
center
,
13
);
var
marker
=
new
GMarker
(
center
,
{
draggable
:
true
});
GEv
ent
.
addListener
(<
/p>
marker
,
,
function
()
{
p>
map
.
closeInfoWindow
();
});
G
Event
.
addListener
(
marker
,
,
function
()
{
p>
marker
.
openInfoWind
owHtml
(
弹起来了
...
);
});
m
ap
.
addOverlay
(
marker
);
查看示例
()
图标(标记)
标记可以用自定义的新
图标来显示,
以替代默认图标。
因为地图
API
中一个图标
(
GIcon
对
象)需要由多个不同的图像组成,所以定义图标较为复杂。一个图标最少
应定义前景图像、
类型为
GSize
的尺寸和用于定位图标的图标偏移值。
最简单的自定义图标是基于
G_DEFAULT_ICON
类型
来创建。基于此类型创建图标让您仅
通过修改若干属性即可快速更改默认图标。
在下面的示例中,我们先用
G_DEFAULT_ICON
类型
创建一个图标,然后使用其他图像来
改变默认图像。
(使用不同
图像时要谨慎,因为它们需要设置为与默认图像相同的正确尺寸
才能正常显示。
)
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
addC
ontrol
(
new
GSmallMapControl
());
p>
map
.
setCenter
(
new
GLatLng
(
39.9493
,
< br>
116.3975
),
13
);
// Create our
var
blueIcon
=
new
GIcon
< br>(
G_DEFAULT_ICON
);
< br>
blueIcon
.
imag
e
=
;
//
Set up our GMarkerOptions object
markerOptions
=
{
icon
:
blueIcon
};
// Add 10 markers to the
map at random locations
var
bounds
=
map
.
getBounds
()
;
var
southWest
=
bounds
.
getSouthWest
();
var
northEast
=
bounds
.
getNorthEast
();
var
lngSpan
=
< br>northEast
.
lng
(
)
-
so
uthWest
.
lng
();
var
latSpan
=
< br>northEast
.
lat
(
)
-
so
uthWest
.
lat
();
for
(
var
i
=
0
;
i
<
10
;
i
++)
{
var
point
=
new
GLatLng
(
southWest
.
l
at
()
+
latSpan
*
< br>Math
.
random
(),
southWest
.
lng
()
+
lngSpan
*
< br>Math
.
random
())
;
ma
p
.
addOverlay
(
new
GMarker
(
point
,
markerOptions
));
}
查看示例
()
多数图标包含前景图像和阴影图像。阴影图像应该和前景图像成
45
度夹角(向右上方倾
斜)
,阴影图像的左下角应与图标前景图像的左下角对齐。阴影图像应是经过
Alpha
透明
处理的
24
位
PNG
图像,以便图像边界可以在地图上正确显示。
以下示例使用
Google
Ride Finder
“迷你”标记为例,创建一种新类型的图标。我们必须
指定前景图像、
阴影图像以及一些将图标锚定到地图、
< br>将信息窗口锚定到图标的点。
请注意
该图标的参数都是通
过
GMarkerOptions
中的选项来指定的。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
addC
ontrol
(
new
GSmallMapControl
());
p>
map
.
addControl
(
new
GMapTy
peControl
());
map
.
setCenter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
// Create our
var
tinyIcon
=
new
GIcon
();
< br>tinyIcon
.
image
=
;
p>
tinyIcon
.
shadow
=
;
tiny
Icon
.
iconSize
=
new
GSiz
e
(
12
,
20
);
t
inyIcon
.
shadowSize
=
new
GSize
(
22
,
20
);
tinyIcon
.
iconAnchor
=
new
GPoint
(
6
,
p>
20
);
p>
tinyIcon
.
infoWindow
Anchor
=
new
GPoint
(
5
,
1
);
// Set up our GMarkerOptions object
literal
markerOptions
=
{
icon
:
tinyIcon
};
// Add 10 markers to the
map at random locations
var
bounds
=
map
.
getBounds
()
;
var
southWest
=
bounds
.
getSouthWest
();
var
northEast
=
bounds
.
getNorthEast
();
var
lngSpan
=
< br>northEast
.
lng
(
)
-
so
uthWest
.
lng
();
var
latSpan
=
< br>northEast
.
lat
(
)
-
so
uthWest
.
lat
();
for
(
var
i
=
0
;
i
<
10
;
i
++)
{
var
point
=
new
GLatLng
(
southWest
.
l
at
()
+
latSpan
*
< br>Math
.
random
(),
sou
thWest
.
lng
()
+
lngSpan
*
< br>Math
.
random
())
;
ma
p
.
addOverlay
(
new
GMarker
(
point
,
markerOptions
));
}
请注意
GMarkerOptions
对象
的定义演示了
“对象常量”
表示法的用法。
该对象不是使用
构造函数实例化的,而只是使用名
-
值对进行声明。
查看示例
()
自定义图标
GIcon
对象也有若干其他属性,
应对其进行适当设置,以便使您的图标获取最佳的浏览器
兼容性和功能。例如,
imageMap
属性指定图标图像不透明部
分的形状。如果不在图标中
设置此属性,则整个图标图像(包括透明部分)在
Firefox/Mozilla
中都将是可
点击的。
有关详细信息,请参阅
GIcon
类参考
。
在
许多情况下,
图标可以有不同的前景,
但具有相同的形状和阴影
。
最简单的实现方式是使
用
GIcon
类的构造函数
“复制”
已有的图标
(比如
G_DEFAULT_ICON
,
将其作为
GIcon
的
copy
参数)
,它将复制该图标所有的默认属性,然后您可以对其进行自定义。
var
map
=
new
GMap2
< br>(
document
.
getE
lementById
(
));
map
.
addC
ontrol
(
new
GSmallMapControl
());
p>
map
.
addControl
(
new
GMapTy
peControl
());
map
.
setCenter
(
new
GLatLng
(
39.9493
,
116.3975
),
13
);
// Create a base icon for all of our
markers that specifies the
// shadow, icon dimensions,
etc.
var
baseIcon
=
new
GIcon
< br>(
G_DEFAULT_ICON
);
< br>
baseIcon
.
shad
ow
=
;
base
Icon
.
iconSize
=
new
GSiz
e
(
20
,
34
);
b
aseIcon
.
shadowSize
=
new
GSize
(
37
,
34
);
baseIcon
.
iconAnchor
=
new
GPoint
(
9
,
p>
34
);
p>
baseIcon
.
infoWindow
Anchor
=
new
GPoint
(
9
,
2
);
// Creates a marker whose info window
displays the letter corresponding
// to the given index.
function
createMa
rker
(
point
,
index
)
{
//
Create a lettered icon for this point using our
icon class
var
letter
=
String
.
fromCharCode
(
.
charCodeAt<
/p>
(
0
)
+
index
);
var
letteredIcon
=
new
GIcon
< br>(
baseIcon
);
letteredIcon
.
image
=
+
letter
+
;
// Set up our
GMarkerOptions object
markerOptions
=
{
icon
:
letteredIcon
};
var
marker
=
new
GMarker
(
point
,
markerOptions
);
GEvent
.
addListener
(
ma
rker
,
,
function
()
{
marker
.
openInfoWindowHtml
(
标记
+
letter
+
);
});
return
marker
;
}
// Add 10 markers to the
map at random locations
var
bounds
=
map
.
getBounds
()
;
var
southWest
=
bounds
.
getSouthWest
();
var
northEast
=
bounds
.
getNorthEast
();
var
lngSpan
=
< br>northEast
.
lng
(
)
-
so
uthWest
.
lng
();
var
latSpan
=
< br>northEast
.
lat
(
)
-
so
uthWest
.
lat
();
for
(
var
i
=
0
;
i
<
10
;
i
++)
{
var
point
=
new
GLatLng
(
southWest
.
l
at
()
+
latSpan
*
< br>Math
.
random
(),
sou
thWest
.
lng
()
+
lngSpan
*
< br>Math
.
random
())
;
ma
p
.
addOverlay
(
createMarker
(
point
,
i
));
}
查看示例
()
使用标记管理器
向
Google
< br>地图添加大量标记可能会降低显示地图的速度,还会使视觉效果过于混乱,对
于某
些缩放级别尤其如此。
标记管理器实用工具提供了一个解决这些问题的方案,
允许在同
一个地图上高效显示数百个标记,并能够指定应显示标记的缩放级
别。
GMaps
实用工具库
中提供标记管理器实用工具。
该库为开源,
包
含不属于核心
Google
地
图
API
的工具。
要添加该库中包含的工具,
可
以使用
标签直接添加
JavaScript
源代码。