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数据排序的3个例子
Apr 12 Javascript
jquery实现submit提交表单
Feb 03 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
node.js中express-session配置项详解
May 31 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
自己做矿石收音机
2021/03/02 无线电
基于文本的搜索
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python中zip()函数用法实例教程
2014/07/31 Python
python修改操作系统时间的方法
2015/05/18 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python 显示数组全部元素的方法
2018/04/19 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
2014年学生工作总结
2014/11/20 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python