Changes between Version 4 and Version 5 of oid/WorkLog/08-09-22

Timestamp:

Sep 22, 2008, 8:16:43 PM (16 years ago)

Author:

jazz

Comment:

--

oid/WorkLog/08-09-22

@@ -41 +41 @@
      </script>
 }}}
- * Q: Google Map 如何使用自己的背景底圖??
+ * Q: Google Map 如何使用自己定義的按鈕??
    * A: 參考範例 [http://alderaan.arc.nasa.gov/maps/mars/ Polar Mars Example]
+ * 解析 [http://alderaan.arc.nasa.gov/maps/mars/ Polar Mars Example] 原始碼
+{{{
+#!java
+
+    <script src="http://alderaan.arc.nasa.gov/maps/nasamaps.js" type="text/javascript"></script>
+    // 底下有一些名稱為 NASA_MARS 開頭的常數是定義在 nasamaps.js 中
+
+.. 略 ..
+
+    if (GBrowserIsCompatible()) {
+      // 產生 GMap2 的 Google Map 底圖物件，並宣告 mapTypes 屬性包括六種 GMapType
+      map = new GMap2( document.getElementById("map"), {mapTypes:[NASA_MARS_VISIBLE_MAP, NASA_MARS_VISIBLE_MAP_NPOLAR, NASA_MARS_VISIBLE_MAP_SPOLAR, NASA_MARS_ELEVATION_MAP, NASA_MARS_ELEVATION_MAP_NPOLAR, NASA_MARS_ELEVATION_MAP_SPOLAR]});
+    
+      map.addControl(new GLargeMapControl());               // 加入左上角比例尺規控制列
+      mtc = new GHierarchicalMapTypeControl();              // 產生自訂階層式控制列
+      mtc.addRelationship(NASA_MARS_VISIBLE_MAP,NASA_MARS_VISIBLE_MAP_NPOLAR);     // 把 North Polar 加到 Visible 下
+      mtc.addRelationship(NASA_MARS_VISIBLE_MAP,NASA_MARS_VISIBLE_MAP_SPOLAR);     // 把 South Polar 加到 Visible 下
+      mtc.addRelationship(NASA_MARS_ELEVATION_MAP,NASA_MARS_ELEVATION_MAP_NPOLAR); // 把 North Polar 加到 Elevation 下
+      mtc.addRelationship(NASA_MARS_ELEVATION_MAP,NASA_MARS_ELEVATION_MAP_SPOLAR); // 把 North Polar 加到 Elevation 下
+      map.addControl(mtc);                                  // 把自訂階層式控制列加入右上角
+      map.setCenter( new GLatLng(0,0), 2 );                 // 定義地圖中心
+
+      // 底下這一段很有趣，NASA 刻意要把右下角"使用條款"前的授權換成 NASA/USGS 的字眼
+      map.termsDiv_ = map.getContainer().childNodes[1];     // 取得第二個 Div (陣列[0]才是第一個, 陣列[1]是第二個) (詳見圖片)
+      map.copyrightSpan_ = document.createElement("span");  // 產生一個新的 <SPAN> 的 DOM 元件
+      map.termsDiv_.insertBefore(map.copyrightSpan_,map.termsDiv_.firstChild); // 把先的 <SPAN> 元件插入到第二個 DIV 的第一個元件前面
+      map.copyrightSpan_.innerHTML = "<a href=\"http://ti.arc.nasa.gov/projects/planetary/\">NASA/USGS</a> - "; // 自訂的 <SPAN> 內容設定為 NASA/UGGS 跟相關聯結
+    }
+}}}
+ * 上面有一段的 DOM 可以用 Firefox 的 DOM Inspector 去看
+[[Image(GogleMapDOM.jpg)]]
+ * 繼續解析 [http://alderaan.arc.nasa.gov/maps/nasamaps.js nasamaps.js]
+{{{
+#!java
+
+.. 略 ..
+
+function TMSBaseLayer( baseurl, levels ) {
+  var layer = new GTileLayer(null, 0, levels);
+  layer.isPng = function() { return false };
+  layer.getTileUrl = function(tile, zoom) {
+    var y = Math.pow(2, zoom)-tile.y-1;
+    var url = baseurl + zoom + "/" + tile.x + "/" + y + ".jpg";
+    return url;
+  };
+  return layer;
+}
+
+var NASA_MOON_VISIBLE_MAP = new GMapType( [TMSBaseLayer("http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/",9)],
+                                          new GMercatorProjection(10), "Visible" );
+
+var NASA_MOON_VISIBLE_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/visible_north/",8)],
+                                              new PolarStereographicProjection(8,NORTH),
+                                              "North Polar" );
+
+var NASA_MOON_VISIBLE_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/visible_south/",8)],
+                                              new PolarStereographicProjection(8,SOUTH),
+                                              "South Polar" );
+
+var NASA_MOON_ELEVATION_MAP = new GMapType( [TMSBaseLayer("http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/terrain/",7)],
+                                          new GMercatorProjection(10), "Elevation" );
+
+var NASA_MOON_ELEVATION_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/terrain_north/",6)],
+                                              new PolarStereographicProjection(8,NORTH),
+                                              "North Polar" );
+
+var NASA_MOON_ELEVATION_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/terrain_south/",6)],
+                                              new PolarStereographicProjection(8,SOUTH),
+                                              "South Polar" );
+
+var NASA_MARS_VISIBLE_MAP = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/visible/",9)],
+                                          new GMercatorProjection(10), "Visible" );
+
+var NASA_MARS_VISIBLE_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/visible_north/",8)],
+                                              new PolarStereographicProjection(8,NORTH),
+                                              "North Polar" );
+
+var NASA_MARS_VISIBLE_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/visible_south/",8)],
+                                              new PolarStereographicProjection(8,SOUTH),
+                                              "South Polar" );
+
+var NASA_MARS_ELEVATION_MAP = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/terrain/",8)],
+                                          new GMercatorProjection(10), "Elevation" );
+
+var NASA_MARS_ELEVATION_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/terrain_north/",7)],
+                                              new PolarStereographicProjection(8,NORTH),
+                                              "North Polar" );
+
+var NASA_MARS_ELEVATION_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/terrain_south/",7)],
+                                              new PolarStereographicProjection(8,SOUTH),
+                                              "South Polar" );
+}}}