Tuesday, June 17, 2008

快快樂樂學 Google Geo API

Labels: , , ,
Google 對於地理地圖相關應用真是越來越多彩多姿，一開始由 Google Maps API 出發，延伸出 Mapplets API, Static Maps API, Maps API for Flash, 整合導航資訊，交通流量，Streat View，Geocode，一直延伸到 Google Earth Plug-in API，還有 Google Earth 上的進展，像 3D 模型，45度視圖，整合相片，YouTube，和超級多相關的地理資訊，甚至 Google Sky 更是超有創意的應用。也才只是在不久前，在網路上要找地圖是多困難的事，不僅有提供地圖的服務極少，品質不好，而且操作起來十分難用，一格一格的，按一下方向等個半天。

以編程的角度來說，Maps API 的用法也慢慢的有點改變，比起以前的用法更方便，限制也更少。這裡收集一些 API 的最簡範例，算是"快快樂樂學 Geo Programming" 吧。

最簡單的是 Static Maps API，Static Maps API 就是你給 Google 一個 url 指示要顯示哪裡的地圖， Google 就回傳給你一張圖，就這樣。像是 
http://maps.google.com/staticmap?center=23.63446,120.970459&zoom=7&size=512x512&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xQJpBVbSrqNn69S6DOTv203MQ5ufA
這樣的網址，就會顯示一張圖: 其中的參數像 center, zoom, size 都很明顯，比較麻煩的是 key 這個參數，幾乎所有的 Google Maps 相關的 API 都會需要這個 key，雖然有點麻煩，但也只是要在這裡申請，馬上就拿到了，至於申請的網址要填什麼，因為在測試階段(在 Local 端使用，在 Static Maps API 的情況就是顯示圖片的 request 不是由其他網站 redirect 來的)，其實 Google 的 API 是不會真的檢查 Key，所以申請網址就隨便寫就行了。

再來就是 Google Maps API。Google Maps API 是個 JavaScript Library，除了圖資是在 Server 端外，其他所有的動作都是在 Browser 上執行。最完整的說明當然是官方文件。自己在測試時是不用申請 api key 的，直接打開記事本，塞進下面這段 code: 
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello Google Maps!</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width:512px; height:512px"></div>

<script type="text/javascript">
google.load("maps", "2.x");

// Call this function when the page has been loaded
function initialize() {
  var map = new google.maps.Map2(document.getElementById("map"));
  map.setCenter(new google.maps.LatLng(23.63446,120.970459), 7);
}

google.setOnLoadCallback(initialize);
</script>
</body>
</html>
存檔為 googlemapsapi.html，用 browser 打開，就完成了。


再下來是 Google Earth Plug-in API。Google Earth Plug-in API 是 Google 開發的一個 Browser Plug-in，在 Browser 上做出一個比較簡化的 Google Earth，而且支援用 JavaScript 來做為 Scripting language。首先安裝這個 Plug-in，之後再用記事本塞進這段: 
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello Google Earth!</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
</head>
<body>
<div id="map3d" style="width:512px; height:512px"></div>

<script type="text/javascript">
google.load("earth", "1");

function initCallback(ge) {
  ge.getWindow().setVisibility(true);
  var lookAt=ge.createLookAt("");
  lookAt.setLatitude(23.63446);
  lookAt.setLongitude(120.970459);
  lookAt.setAltitude(800000);
  ge.getView().setAbstractView(lookAt);
}

function initialize() {
  google.earth.createInstance("map3d", initCallback);
}

google.setOnLoadCallback(initialize);
</script>
</body>
</html>
存檔為 googleearthapi.html，用 browser 打開，就完成了。


這裡可以看到，兩種 api 的程式非常類似，兩者都用到了相同的 loading JavaScript 機制，這也是 API 經過幾次修改後整合起來的型式。

最後再來看 Maps API for Flash。要弄 Flash 版本比較麻煩一點，要下載 flex sdk，再下載 google maps sdk，把 flex sdk 解開(eg: c:\flex_sdk_3\)，開個目錄 (eg: test.flex)，把 google maps api 解開，得到 map_flex_1_4.swc，這樣開發環境就出來了。

然後一樣，記事本塞程式： 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:UIComponent id="mapc" initialize="startMap(event);" resize="resizeMap(event)" width="100%" height="100%"/>
<mx:Script><![CDATA[
import flash.events.Event;
import com.google.maps.MapEvent;
import com.google.maps.Map;
import com.google.maps.LatLng;

private var map:Map;

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(23.63446, 120.970459), 7);
}

public function resizeMap(event:Event):void {
  map.setSize(new Point(mapc.width, mapc.height));
}

public function startMap(event:Event):void {
  map = new Map();
  map.addEventListener(MapEvent.MAP_READY, onMapReady);
  mapc.addChild(map);
}
]]>
</mx:Script>
</mx:Application>
存檔為 googlemapsflashapi.mxml，然後將 mxml 編譯出 swf: 
c:\flex_sdk_3\bin\mxmlc -library-path+=map_flex_1_4.swc googlemapsflashapi.mxml

再開另一個檔案: 
<html>
<head>
<title>Hello Google Maps for Flash!</title>
</head>
<body>
<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
  width="512px" height="512px">
  <param name="movie" value="./googlemapsflashapi.swf">
  <param name="quality" value="high">
  <param name="flashVars" value="key=ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g">
  <embed width="512px" height="512px" src="./googlemapsflashapi.swf" quality="high"
    flashVars="key=ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    type="application/x-shockwave-flash"></embed>
</object>
</body>
</html>
存檔為 googlemapsflashapi.html，用 browser 打開，就完成了。

綜觀這幾個例子，可以看出這些程式是蠻相似的，都是用 markup language 訂出介面，再用 script language 處理互動，相信如果有 silverlight 版本也會是一樣的作法。

0 comments:

Post a Comment