Google (Local) Search API的简单使用介绍_Javascript教程-查字典教程网
Google (Local) Search API的简单使用介绍
Google (Local) Search API的简单使用介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:花了两天的时间来用Google的API来做这么一个小东西,其实真正的实现代码不是很多,十几行而已。费时间的工作是了解各个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);

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类