这篇文章主要介绍了 Google (Local) Search API 的简单使用。需要的朋友可以过来参考下,希望对大家有所帮助
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
花了两天的时间来用 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);
来源: