網站頁面
課程
成員
一般
主題 1
主題 2
主題 3
主題 4
主題 5
主題 6
主題 7
主題 8
主題 9
主題 10
主題 11
主題 12
主題 13
主題 14
主題 15
主題 16
主題 17
主題 18
Lesson9:GoogleEarth Plug-in
http://code.google.com/apis/earth/
Google Earth Plug-in是利用下載並安裝JavaScript API後,就可以將Google Earth內坎至網頁中,可以Drape影像在地形上,也可以顯示3D的Sketcup模型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Using Google Earth with the Maps API</title> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAEP4JfY_0WuuqO-_le09ZJhRe7Zh1I3Boyx5c-cn-rdkhkujO2RTxBvMLBsPw8as-S4BCUf9utOWKrQ"></script> <script type="text/javascript"> function initialize() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(22.047795, 121.516900), 7); // The following line makes the map Earth-enabled by adding the "Earth" button to the map type control. // Note that you still need to add a map type control (GMapTypeControl, GMenuMapTypeControl, or GHierarchicalMapTypeControl) to the the map. // Also, be sure you are loading v=2.x of the Maps API and not v=2, otherwise the G_SATELLITE_3D_MAP map type will not work properly. map.addMapType(G_SATELLITE_3D_MAP); map.addControl(new GHierarchicalMapTypeControl()); map.addControl(new GLargeMapControl()); var marker = new GMarker(new GLatLng(22.047795, 121.516900)); GEvent.addListener(marker, "click", function() { var html = '<div style="width: 210px; padding-right: 10px">蘭嶼<\/div>'; marker.openInfoWindowHtml(html); }); map.addOverlay(marker); GEvent.trigger(marker, "click"); var polyline = new GPolyline([ new GLatLng(22, 123), new GLatLng(22.9, 122), new GLatLng(22.2, 121.3), new GLatLng(22.2, 120.3) ], "#ff0000", 4); GEvent.addListener(polyline, "click", function(latlng) { var html = '<div style="width: 210px; padding-right: 10px">A polyline.<\/div>'; map.openInfoWindowHtml(latlng, html); }); map.addOverlay(polyline); } </script> </head> <body onload="initialize()" onunload="GUnload"> <div id="map" class="map" style="width:800px;height:600px"></div> </body> </html> |