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&v=2&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=" 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>