Google (Local) Search API的简单使用介绍


Posted in Javascript onNovember 28, 2013

花了两天的时间来用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的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 #Javascript
asm.js使用示例代码
Nov 28 #Javascript
jquery实现动态菜单的实例代码
Nov 28 #Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 #Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 #Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 #Javascript
使用js写的一个简易的投票
Nov 27 #Javascript
You might like
黑夜路人出的几道php笔试题
2009/08/04 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php适配器模式简单应用示例
2019/10/23 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
小程序云开发实战小结
2018/10/25 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
pytorch permute维度转换方法
2018/12/14 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python爬虫超时的处理的实例
2018/12/19 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python 动态调用函数实例解析
2019/10/21 Python
Python 复平面绘图实例
2019/11/21 Python
解决Python安装cryptography报错问题
2020/09/03 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
会议欢迎标语
2014/06/30 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015年度物流工作总结
2015/04/30 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
保留意见审计报告
2015/06/05 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js