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 数组以及json元素的添加删除
Jun 26 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
js实现简单的轮播图效果
Dec 13 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防注
2007/01/15 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php中spl_autoload详解
2014/10/17 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python之pandas用法大全
2018/03/13 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
医药大学生求职简历的自我评价
2013/10/17 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技