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>

 

posted @ 2013-04-13 02:03  Ganler1988  阅读(458)  评论(0)    收藏  举报