花了兩天的時間來用Google的API來做這麼一個小東西,其實真正的實作程式碼不是很多,十幾行而已。花時間的工作是了解各個API的功能以及調試JavaScript。
下面簡單介紹一下這次我用到的幾個函數吧。
•建構子google.search.LocalSearch()
這其實是建立了一個LocalSearch的Service,這個Service和其他Service(News, Blog, Web)一樣,都是供SearchControl使用的。這些Service決定了SearchControl的能力。
•設定LocalSearch的搜尋結構類型
localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS)
這說明搜尋的結果沒有business的結果,只有kml和geocode結果
•設定LocalSearch的搜尋範圍
localSearch.setCenterPoint("北京");
•google.search.SearcherOptions()
設定Search Service(Searcher)的屬性,作為SearchControl.addSearcher()的屬性使用,有下列選項可以選擇:
1.設定結果的顯示方式
•searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
2. 設定檔沒有搜尋結果時顯示的文字
• searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);
3. 設定結果顯示的位置
•searcherOptions.setRoot(resultCanvas);
•new google.search.DrawOptions();
設定Google Search Control的顯示方式
•drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
設定顯示方式為tabbed方式,即各個Searcher像tabs一樣顯示
•drawOptions.setInput(document.getElementById("input"));
將搜尋輸入框的預設值改為使用者自訂的輸入框
將使用者選擇搜尋結果作為一個對應的GResult物件傳回,如LocalSearch的GResult就是一個GLocalResult。
這個選項花了我很久才找到,原因有二,一是用的人少,文件少。二是我看的英文文檔,花了蠻長時間才看明白,其實看中文文檔要花的時間更長,我覺得。
•searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);
順便貼上LocalSearchKeepHandler的程式碼,其參數為自動傳回的那個GResult物件。
複製代碼代碼如下:
function LocalSearchKeepHandler(result) {
var from = document.getElementById("from");
alert("result.tilte = " + result.title);
從.value = ProcessString(result.title);
alert("from.value = " + from.value);
//alert(result.title);
}
乾脆把這段程式碼整體貼出,方便閱讀
複製代碼代碼如下:
google.load("search", "1", {"language": "zh-CN"});
function initialize() {
//LocalSearch Object used to create a local search service for the maps
var localSearch = new google.search.LocalSearch();
//restrict the local search resutls to kml and geocode results only, no business ones
localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS);
// Set the Local Search center point
localSearch.setCenterPoint("北京");
//It's about local search, which are used to set where the results will appear, a param of options
var resultCanvas = document.getElementById("resultCanvas");
//options: open, alternate root
var searcherOptions = new google.search.SearcherOptions();
//show many results
searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
//no results message
searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);
//options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//web, local... in a tab show
searcherOptions.setRoot(resultCanvas);//show the results in another place--<div id="resultCanvas">
//SearchControl Object used to create a search service which will include a local search service
var searchControl = new google.search.SearchControl(null);
searchControl.addSearcher(localSearch, searcherOptions);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.BlogSearch());
//draw options and set it to a tabbed view,
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
//make the searchControl return a result:GResult
searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);//keeping a search result
//this option is used to set the search box position in a DOM tree.
//drawOptions.setSearchFormRoot(document.getElementById("drawOptions"));
//set the input box to a user defined element
//drawOptions.setInput(document.getElementById("input"));
// tell the search box to draw itself and tell it where to attach
//searchControl.draw(document.getElementById("searchBox"), drawOptions);//Here I changed fromaddress and toaddress to search, a new place
//another user defined input box
drawOptions.setInput(document.getElementById("input2"));
searchControl.draw();
/** The codes below is about google Ajax Map Search API
//this code segment is used to add a sidebar to show the results of the search
//I wonder why no 'var' exists here
optinos = new Object();
options.resultList = resultCanvas;
options.resultFormat = "multi-line1";
var lsc2 = new google.elements.LocalSearch(options);
map.addControl(lsc2, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(-282, -2)));
*/
}
google.setOnLoadCallback(initialize);