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 相关文章推荐
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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的引用详解
2015/02/22 PHP
php文件读取方法实例分析
2015/06/20 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
解决Python传递中文参数的问题
2015/08/04 Python
利用python代码写的12306订票代码
2015/12/20 Python
python flask 多对多表查询功能
2017/06/25 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python版DDOS攻击脚本
2019/06/12 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
工程资料员岗位职责
2014/03/10 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
开国大典观后感
2015/06/04 职场文书