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(视频与PPT)
Dec 27 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 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
c#中的实现php中的preg_replace
2009/12/21 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Django forms组件的使用教程
2018/10/08 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python JSON编解码方式原理详解
2020/01/20 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
协议书怎么写
2014/04/21 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
初二英语教学反思
2016/02/15 职场文书
赞美教师的句子
2019/09/02 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers