Google (Local) Search API的简单使用

花了两天的时间来用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); 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--<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);