在地图的边界内，随机放置一个标记【GMap 学习笔记】

1
<!
DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"

2
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>

3
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>

4

<
head
>

5

<
meta
http-equiv
="content-type"
content
="text/html; charset=utf-8"
/>

6

<
title
>
Google Maps JavaScript API Example
</
title
>

7

<!--
使用 script 标签包含 Google 地图,key传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置
-->

8

<
script
src
="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"

9
type
="text/javascript"
></
script
>

10

<
script
type
="text/javascript"
>

11

12

function
initialize() {

13

var
map
=

new
GMap2(document.getElementById(
"
map_canvas
"
));

14

//
住：缩放级别：在普通地图视图内，可以使用 0（最低缩放级别，在地图上可以看到整个世界）

15

//
到 19（最高缩放级别，可以看到独立建筑物）

16
map.setCenter(
new
GLatLng(
38.881946
,
121.587964
),
15
);

17

//
在 Google 地图 API 中，地图使用标准的“绘制”图块显示

18

19

//
所有类型：G_NORMAL_MAP- 默认视图，

20

//
G_SATELLITE_MAP - 显示 Google 地球卫星图像

21

//
G_HYBRID_MAP - 混合显示普通视图和卫星视图

22

//
G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用

23
map.setMapType(G_SATELLITE_MAP);

24

25

//
获得地图边界

26

var
bounds
=
map.getBounds();

27

//
获得西南角坐标

28

var
southWest
=
bounds.getSouthWest();

29

//
获得东北角坐标

30

var
northEast
=
bounds.getNorthEast();

31

//
计算经度差

32

var
lngSpan
=
northEast.lng()
-
southWest.lng();

33

//
计算纬度差

34

var
latSpan
=
northEast.lat()
-
southWest.lat();

35

//
随机产生一个经度值和一个纬度值，构成一个坐标点

36

var
point
=

new
GLatLng(southWest.lat()
+
latSpan
*
Math.random(),

37
southWest.lng()
+
lngSpan
*
Math.random());

38

//
标记是 GMarker 类型的对象，将随机产生的坐标传给GMarker，并在地图上显示此标记。

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

40
}

41

</
script
>

42

</
head
>

43

<!--
使用onLoad 事件初始化地图对象
-->

44

<
body
onload
="initialize()"
onunload
="GUnload()"
>

45

<!--
让其显示在网页中
-->

46

<
div
id
="map_canvas"
style
="width: 600px; height: 600px"
></
div
>

47

</
body
>

48
</
html
>