2008年12月23日星期二

Google Search api 心得

google search api 提供了很多種搜尋如
localSearch,WebSearch,BlogSearch,imgeSearch,NewsSearch,BookSearch and
PatentSearch 等

這裡我就以一個範例大致介紹一下imgeSearch 的部分；

這個範例的內涵是輸入一個字串，如taipei,找出google imgeSearch 的資料，並將圖片貼在網頁上(在右側顯示前四張圖片)

由於他網站google search api 上的說明還蠻淺顯易懂的有興趣的可以看http://code.google.com/intl/
zh-TW/apis/ajaxsearch/documentation/

結果如下

-------------------------------------------------
以下示範例code

1. head 部分

引用google api ，用google account可以申請
如下
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAy-Ulx72brHCd0DtCPGmBFRRbZEp8C4_MgJNX2IGnI57Zyu60bBSf-cAEuJBLHkAS5ENN-3MHGHIGtQ"></script>

2. CSS 部分

<style type="text/css">

#searchcontrol { width : 50% }
#photo{
top: 0%;
position: absolute;
left: 50%;
}

</style>

3. javascript 部分

// 引用google search api
google.load('search', '1.0');

function Init() {
// Create a search control
var searchControl = new google.search.SearchControl();

// add searcher imgeSearch, also have many other search like
// localSearch,WebSearch,BlogSearch,NewsSearch,BookSearch and PatentSearch
// see more to http://code.google.com/intl/zh-TW/apis/ajaxsearch/documentation/#The_Hello_World_of_Google_Search

searchControl.addSearcher(new google.search.ImageSearch());

// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// execute an inital search
searchControl.execute("taipei");

// establish a Search Complete Callback
searchControl.setSearchCompleteCallback(this, this.MyKeepHandler);
}

function MyKeepHandler(sc, searcher) {

// record the search result
if (searcher.results && searcher.results.length > 0) {
idx = 0;
url = [];
for (var i=0; i<searcher.results.length; i++) {
// unescapedUrl is the pic url
// see more http://code.google.com/intl/zh-TW/apis/ajaxsearch/documentation/reference.html#_class_GimageResult
url[i] = searcher.results[i].unescapedUrl;
} //end of for
}//end of if

// set the pic to the html frame
picture1=document.getElementById("pic1")
picture1.src=url[0];

picture2=document.getElementById("pic2")
picture2.src=url[1];

picture3=document.getElementById("pic3")
picture3.src=url[2];

picture4=document.getElementById("pic4")
picture4.src=url[3];
}

4. body部分

<body onload="Init()">
<div id="searchcontrol">Loading</div>
<div id="saved_results"></div>
<div id="photo" >
<img id='pic1' src='' width=300px height=200px>
<img id='pic2' src='' width=300px height=200px>
<img id='pic3' src='' width=300px height=200px>
<img id='pic4' src='' width=300px height=200px>
</div>
</body>

2008年12月17日星期三

Google feeds api 心得

標籤： google api

Google feeds api 可以讓我們在網頁上可以讀取網路上的 RSS 資訊再重新整理，以下用一個範例說明如何運行

以下範例是利用google feeds api 讀取 yahoo weather RSS 的範例

可以分成幾段
一、head 部分
引用google api ，用google account可以申請
如下

<script type="text/javascript" src="http://www.google.com/jsapi?
key=ABQIAAAAy-Ulx72brHCd0DtCPGmBFRRbZEp8C4_MgJNX2IGnI57Zyu60bBSf-
cAEuJBLHkAS5ENN-3MHGHIGtQ"></script>

二、 body 部分加入要放的標籤好存放資訊及讀取的檔案

<body onload="feedsWeather()" window.open.scrollbars=no >
<div ID="city" ></div>
<img id="code" src="" height="50px" width="50px" /> </div>
<div ID="text" ></div>
<div ID="temp" ></div>
<div ID="date" ></div>
</body></html>

三、在head 加入 javascript

分成三個部分

1.google.load('feeds', '1'); //引用google feeds

2.function feedsWeather()
{
//url 的位址這裡是使用yahoo 的天氣資訊rss 地點是台北
var weatherURL = 'http://xml.weather.yahoo.com/forecastrss?
u=c&p=TWXX0021'

//使用google feeds 取得資訊
var feed = new google.feeds.Feed(weatherURL);
//設定為xml的格式，預設是json格式
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
//get feed information
feed.load(parseWeather);
}

3. function parseWeather(result){
if (result.error) { return; } //如果錯誤就不處理
var loaction = result.xmlDocument.getElementsByTagName
("yweather:location");
city=loaction[0].getAttribute('city'); //天氣狀況
//將相關資訊寫入網頁
document.getElementById("city").innerHTML="this is "+ city+ "
city weather";
//取得 item 之間的tag
var gms = result.xmlDocument.getElementsByTagName("item");
if (gms.length <= 0) { return null; } //如果無內容就回傳
NULL
var ele = gms[0]; //有關的天氣內容都存到gms[0]陣列
//取得 yweather:condition 之間的tag
var yweathers = ele.getElementsByTagName("yweather:condition");
//取得相關資訊
code = yweathers[0].getAttribute('code'); //天氣代碼
text = yweathers[0].getAttribute('text'); //天氣狀況
temp = yweathers[0].getAttribute('temp'); //天氣溫度
date = yweathers[0].getAttribute('date'); //天氣取得日期
//將相關資訊寫入網頁
document.getElementById("code").src='http://image.weather.com/
web/common/wxicons/52/'+code+'.gif';
document.getElementById("text").innerHTML=text;
document.getElementById("temp").innerHTML=temp+' degree Celsius
';
document.getElementById("date").innerHTML=date;
}//end parseWeather
</script>

結果如下

2008年12月16日星期二

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

標籤： google earth api

上次介紹如何貼圖，這一次介紹如何設定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

2008年12月8日星期一

google earth 貼圖

標籤： google earth api

在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);
}

2008年12月3日星期三

心得文 google earth api

標籤： 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&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>

訂閱：文章 (Atom)

2008年12月23日 星期二

Google Search api 心得

2008年12月17日 星期三

Google feeds api 心得

2008年12月16日 星期二

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

2008年12月8日 星期一

google earth 貼圖

Google Earth API Samples - Screen Overlay

2008年12月3日 星期三

心得文 google earth api

2008年12月23日星期二

2008年12月17日星期三

2008年12月16日星期二

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

2008年12月8日星期一

2008年12月3日星期三