Google(Local)SearchAPI的簡(jiǎn)單使用介紹_javascript技巧

下面簡(jiǎn)單介紹一下這次我用到的幾個(gè)函數(shù)吧。

•構(gòu)造函數(shù)google.search.LocalSearch()

這其實(shí)是創(chuàng)建了一個(gè)LocalSearch的Service，這個(gè)Service和其他Service（News, Blog, Web）一樣，是供SearchControl使用的。這些Service決定了SearchControl的能力。

•設(shè)置LocalSearch的搜索結(jié)構(gòu)類型

localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS)

這說明搜索的結(jié)果沒有business的結(jié)果，只有kml和geocode結(jié)果

•設(shè)置LocalSearch的搜索范圍

localSearch.setCenterPoint("北京");

•google.search.SearcherOptions()

設(shè)置Search Service(Searcher)的屬性，作為SearchControl.addSearcher()的一個(gè)屬性使用，有以下選項(xiàng)可以選擇：

1.設(shè)置結(jié)果的顯示方式
•searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

2. 設(shè)置檔沒有搜索結(jié)果時(shí)顯示的文字

• searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);

3. 設(shè)置結(jié)果顯示的位置

•searcherOptions.setRoot(resultCanvas);

•new google.search.DrawOptions();

設(shè)置Google Search Control的顯示方式

•drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)

設(shè)置顯示方式為tabbed方式，即各個(gè)Searcher像tabs一樣顯示

•drawOptions.setInput(document.getElementById("input"));

將搜索輸入框的默認(rèn)值改為用戶自定義的一個(gè)輸入框

將用戶選擇搜索結(jié)果作為一個(gè)相應(yīng)的GResult對(duì)象返回，如LocalSearch的GResult就是一個(gè)GLocalResult。

這個(gè)選項(xiàng)費(fèi)了我很長(zhǎng)時(shí)間才找到，原因有二，一是用的人少，文檔少。二是我看的英文文檔，花了挺長(zhǎng)時(shí)間才看明白，其實(shí)看中文文檔要花的時(shí)間更長(zhǎng)，我覺得。

•searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);

順便貼上LocalSearchKeepHandler的代碼，其參數(shù)為自動(dòng)返回的那個(gè)GResult對(duì)象。
代碼如下:
function LocalSearchKeepHandler(result) {
var from = document.getElementById("from");
alert("result.tilte = " + result.title);
from.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--
//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);

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com