Google Api key and Google App engine

一個小心得， 當local 端 程式有使用到 google api key 的功能時， 上傳到其他網站，
如 google app engine 的網址時， 記得重新申請一組 key 註冊要上傳的網址

KML

介紹一下 KML

KML 一種標籤語言，針對Google Earth 的描述語言
如同XML對於html, KML相對於Google Earth

除KML外，針對Google Earth 的另一種標籤語言
KMZ
為KML打包的壓縮格式
解壓縮後即可看到KML 檔

----------------------------------------------------------------------------------------------------------
Summary
----------------------------------------------------------------------------------------------------------
KML 及 KMZ 是 控制 Google Earth上的圖層的描述，包含增加圖層
如節點、範圍、路徑、建築物
除增加圖層外，也有錄影功能，更能顯現出路徑的表達，或旅遊的紀錄
在節點的描述可以加入javascript
節點內可以鑲入圖片、影片或一些排版
但此javascript有許多語法被限制，如alert, event

----------------------------------------------------------------------------------------------------------
Tool
----------------------------------------------------------------------------------------------------------
Google Earth export
Notepad
Mapmash KMLCreator
http://mapmash.googlepages.com/kmlpoint.html
Google SketchUp
http://sketchup.google.com/index.html

----------------------------------------------------------------------------------------------------------
教學
----------------------------------------------------------------------------------------------------------
Document：
http://code.google.com/apis/kml/documentation/
Tutorial：
http://code.google.com/apis/kml/documentation/kml_tut.html

附錄 Tutorial摘要

Touring 漫遊，導覽
Altitude Modes 圖層高度設定
Time and Animation 圖層動作，如會動的倫敦之眼
Cameras 視角控制
Adding PhotoOverlays 加入類似街景視圖的圖片
Sky Data in KML 產生Sky data 的文件
Adding Custom Data 標籤的描述語言說明
Models 建立建築物
Working with Regions 繪製區域範圍圖層
Updates 更新其他的KML屬性
Expiration 使連結資料可以重複更新

----------------------------------------------------------------------------------------------------------
範例
----------------------------------------------------------------------------------------------------------
http://earth.google.com/intl/zh-TW/outreach/global_dev.html
http://earth.google.com/intl/zh-TW/outreach/tutorials.html

另外 整理成PPT 在

http://docs.google.com/EmbedSlideshow?docid=dgrnpzdv_124ddhkp4gv

Google Earth 設中心點 、加地標 及監聽事件

上次介紹如何貼圖，這一次介紹如何 設定google earth 讀取時的中心點及顯示大小、以及加地標 及監聽事件

一、 設定google earth 讀取時的中心點及顯示大小

在google earth 中呼叫

function SetCenter()
{
var la = ge.createLookAt(''); //宣告 物件la 繼承ge.createLookAt
la.set(24, // lat 緯度
121, // lng 經度
0, // altitude 高度 和range 一樣設定顯示的畫面以數值高的為準
ge.ALTITUDE_RELATIVE_TO_

GROUND,
0, // heading 角度 0-360 舉例來說0和360一樣都是正的,180 剛好是反轉
0, // straight-down tilt 仰角觀測的角度 0 是一般的視角 超過109以上會無法觀看
40000000 // range (inverse of zoom) google earth的可視範圍
);
ge.getView().setAbstractView(la); //設定view
}


當然緯度、經度等變數可以由外部給定

二、 加地標 及監聽事件

同理 在google earth 中呼叫 下列函式就可執行

function CreatePlaceMark(ge){
var placemark = ge.createPlacemark(''); //placemark 繼承ge的
createPlacemark的屬性

//placemark.setName(cityname);

ge.getFeatures().appendChild(placemark); //將新增的placemark加入到
google earth中

// set placemark style
// setPlaceMarkStyle(placemark);

// Create point
var point = ge.createPoint(''); //point 繼承ge的createPoint的屬
性
point.setLatitude(24); //設定緯度
point.setLongitude(121); //設定經度

placemark.setGeometry(point); //將point 設定好的資料放到placemark中

//add the listener function
google.earth.addEventListener(placemark, "click",function()
{ alert("test");}); //在placemark上加入監聽事
件
}//end of CreatePlaceMark

google earth 貼圖

在google Earht 上貼圖， 以下是參考google eearth 範例 加上一些註解


google earth 的範例位址

Google Earth API Samples - Screen Overlay

在initCB() 中加入下面的程式碼就可以在 google earth 上貼圖了



function PostPicture() {
// 宣告 screenOverlay 繼承 ge.createScreenOverlay('') 物件
var screenOverlay = ge.createScreenOverlay('');

screenOverlay.setIcon(ge.createIcon(''));
screenOverlay.getIcon().

//設定圖片位置 基本上我試過都必須要放在網路上或localhost


setHref("http://www.google.com/intl/en_ALL/images/logo.gif");


// Set the point inside the overlay that is used as the positioning
// anchor point.

/* (x,y)

0,1 ----------------1,1
|                    |
|   google earth     |
|                    |  
|                    |
0,0 ----------------1,0    

*/

// PositionX and PositionY 設定圖的中心
// PositionX 和 PositionY 的範圍看上圖
var PositionX=0.2; // between 0 ~1
var PositionY=0.6; // between 0 ~1

screenOverlay.getOverlayXY().setXUnits(ge.UNITS_FRACTION);
screenOverlay.getOverlayXY().setYUnits(ge.UNITS_FRACTION);
screenOverlay.getOverlayXY().setX(PositionX);
screenOverlay.getOverlayXY().setY(PositionY);



// Set object's size in pixels.
//
var sizeX=100; //the picture width
var sizeY=50; //the picture high


screenOverlay.getSize().setXUnits(ge.UNITS_PIXELS);
screenOverlay.getSize().setYUnits(ge.UNITS_PIXELS);
screenOverlay.getSize().setX(sizeX);
screenOverlay.getSize().setY(sizeY);

//add to google earth
ge.getFeatures().appendChild(screenOverlay);
}

心得文 google earth api

google 提供了很多服務 介紹一下最近在玩的 google earth api

要玩 的話 要有幾個先決條件
1 當然要申請一個 google 帳戶
2 到Google Earth API 申請一個使用的key
3 google earth plugin 安裝，基本上進入瀏覽器後會自動問你要不要裝 不過 在windows 下 只支援 firefox, ie6, ie7

接者把下列東西放到html 中就行了

以下放到 head 之間

<script type="text/javascript" src="http://www.google.com/jsapi?hl=en&amp;key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>


<script type="text/javascript">

var ge; //存放 google earth 物件

google.load("earth", "1"); //load google earth %u7269%u4EF6


// 呼叫 google earth
function init() {

//google.earth.createInstance(網頁上的div位置, google earth 設定 , 錯誤訊息 );
google.earth.createInstance('map3d', initCB, failureCB );

}


function initCB(instance) {

//存放 google earth 物件
ge = instance;
ge.getWindow().setVisibility(true);

// add a navigation control
// 控制鍵顯示模式 有三種 這裡是自動影藏顯示
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

// add some layers
// ge.LAYER_BORDERS 國界或行政區分界的顯示
// ge.LAYER_ROADS 道路的顯示
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

}

//錯誤訊息
function failureCB() {
alert('Google earth loading failed!');
}

</script>

----------------------------這是分隔線-------------------------------


以是 body

<body onload="init();">

<div style="clear: both;"></div>

<div id="ui" style="position: relative;">
<div id="map3d_container" style="border: 1px solid #000; width: 500px; height: 500px;">
<div id="map3d" style="height: 100%;"></div>
</div>

</div>
</body>