google地图使用方法

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

 3 <head>

 4     <title></title>

 5 <!--在这里获取密钥http://code.google.com/intl/zh-CN/apis/maps/signup.html-->

 6     <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAA5VR6aCXTjlZP10JVAJ9rAxQ6_rYj0UWRCHN5S6YkT-iCqMGq3RSC1hnQx15MPTMTVl-vhol8GMy6BQ"

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

 8 

 9     <script type="text/javascript">

10         function initialize() {

11             if (GBrowserIsCompatible()) {

12                 var map = new GMap2(document.getElementById("map_canvas"));

13                 /*

14                 给地图添加控件

15                 GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件

16                 GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。

17                 GOverviewMapControl - 位于屏幕一角的可折叠概览地图。(推荐使用)

18                 GMapTypeControl - 让用户切换地图类型(例如“地图”和“卫星”)的按钮

19                 */

20                 //map.addControl(new GLargeMapControl());

21                 map.addControl(new GSmallMapControl());

22                 map.addControl(new GMapTypeControl());

23                 map.addControl(new GOverviewMapControl());

24                 map.addControl(new GSmallZoomControl());

25                 /*

26                 自定义绘制折线

27                 <<<<<

28                 */

29                 var polyline = new GPolyline([

30             new GLatLng(39.9493, 116.3975),

31              new GLatLng(39.9593, 116.4071)

32         ], "#ff0000", 10);

33                 map.addOverlay(polyline);

34                 var center = new GLatLng(39.917, 116.397);

35                 var marker = new GMarker(center, { draggable: true });

36                 GEvent.addListener(marker, "dragend", function() {

37                     marker.openInfoWindowHtml("正在反弹...");

38                 });

39                 var blueIcon = new GIcon(G_DEFAULT_ICON);

40                 blueIcon.image = "http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png"; 

41                 markerOptions = { icon: blueIcon }; 

42                 map.setCenter(new GLatLng(40.20745910697569, 116.23414993286133), 13);

43                 //map.setMapType(G_SATELLITE_MAP);

44                 // 在随机位置向地图中添加 10 个标记

45                 //                var bounds = map.getBounds();

46                 //                var southWest = bounds.getSouthWest();

47                 //                var northEast = bounds.getNorthEast();

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

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

50                 //设置标记的位置

51                 var point = new GLatLng(40.20745910697569, 116.23414993286133);

52                 //openInfoWindow方法弹出信息窗口

53                 map.openInfoWindow(map.getCenter(), document.createTextNode("游一路欢迎您"));

54                 /*

55                 addOverlay方法添加标记位置

56                 toString 方法显示添加标记位置

57                 GEvent.addListener(添加时间函数)

58                 */

59                 //map.addOverlay(new GMarker(point));(不添加自定义组件的时候应该后面参数为空)

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

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

62                     var center = map.getCenter();

63                     document.getElementById("message").innerHTML = center.toString();

64                 });

65                 //panTo移动初始化位置

66                 //setTimeout(function() {map.panTo(new GLatLng(39.927, 116.407)); }, 8000);

67             }

68 

69         }

70         //如果地图失效了请联系我啊

71     </script>

72 

73 </head>

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

75     <div id="map_canvas" style="width: 500px; height: 300px">

76     </div>

77     <div id="message">

78     </div>

79     <div id="enlarge">

80     </div>

81     <div id="reduce">

82     </div>

83 </body>

84 </html>

 

你可能感兴趣的:(google地图)