Google Map Api和GOOGLE Search Api整合实现代码


Posted in Javascript onJuly 18, 2009

Google Map Api和GOOGLE Search Api整合实现代码

 

       将GOOGLE MAP API 和 GOOGLE Search API 进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等,反过来标到地图上,并可在任意容器内显示。
下面是源码:

/* 
*Author:karry 
*Version:1.0 
*Time:2008-12-01 
*KMapSearch 类 
*把GOOGLE MAP 和LocalSearch结合。只需要传入MAP\经纬度值,就可以把该经纬度附近的相关本地搜索内容取出来,在地图上标注出来,并可以在指定容器显示搜索结果 
*/ (function() { 
var markers= new Array(); 
var KMapSearch=window.KMapSearch= function(map_, opts_) { 
this.opts = { 
container:opts_.container || "divSearchResult", 
keyWord:opts_.keyWord || "餐厅", 
latlng: opts_.latlng || new GLatLng(31, 121), 
autoClear:opts_.autoClear || true, 
icon:opts_.icon || new GIcon(G_DEFAULT_ICON) 
}; 
this.map = map_; 
this.gLocalSearch = new google.search.LocalSearch(); 
this.gLocalSearch.setCenterPoint(this.opts.latlng); 
this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET); 
this.gLocalSearch.setSearchCompleteCallback(this, function() { 
if (this.gLocalSearch.results) { 
var savedResults = document.getElementById(this.opts.container); 
if (this.opts.autoClear) { 
savedResults.innerHTML = ""; 
} 
for (var i = 0; i < this.gLocalSearch.results.length; i++) { 
savedResults.appendChild(this.getResult(this.gLocalSearch.results[i])); 
} 
} 
}); 
} 
KMapSearch.prototype.getResult = function(result) { 
var container = document.createElement("div"); 
container.className = "list"; 
var myRadom =(new Date()).getTime().toString()+Math.floor(Math.random()*10000); 
container.id=myRadom; 
container.innerHTML = result.title + "<br />地址:" + result.streetAddress; 
this.createMarker(new GLatLng(result.lat, result.lng), result.html,myRadom); 
return container; 
} 
KMapSearch.prototype.createMarker = function(latLng, content) 
{ 
var marker = new GMarker(latLng, {icon:this.opts.icon,title:this.opts.title}); 
GEvent.addListener(marker, "click", function() { 
marker.openInfoWindowHtml(content); 
}); 
markers.push(marker); 
map.addOverlay(marker); 
} 
KMapSearch.prototype.clearAll = function() { 
for (var i = 0; i < markers.length; i++) { 
this.map.removeOverlay(markers[i]); 
} 
markers.length = 0; 
} 
KMapSearch.prototype.execute = function(latLng) { 
if (latLng) { 
this.gLocalSearch.setCenterPoint(latLng); 
} 
this.gLocalSearch.execute(this.opts.keyWord); 
} 
})();

使用方法:
var myIcon = new GIcon(G_DEFAULT_ICON); 
myIcon.image = "canting.png"; 
myIcon.iconSize = new GSize(16, 20); 
myIcon.iconAnchor = new GPoint(8, 20); 
myIcon.shadow = ""; 
var mapSearch = new KMapSearch(map, {container:"cantingContainer",latlng:initPt,icon:myIcon,keyWord:"餐厅"}); 
mapSearch.clearAll(); 
mapSearch.execute();

点击这里查看演示示例:经纬度查询整合本地搜索

Javascript 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
js实现二级联动简单实例
Jan 11 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
比较简单的异步加载JS文件的代码
Jul 18 #Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 #Javascript
DOM 基本方法
Jul 18 #Javascript
javascript 全角转换实现代码
Jul 17 #Javascript
JavaScript 创建对象
Jul 17 #Javascript
prototype 学习笔记整理
Jul 17 #Javascript
表单元素事件 (Form Element Events)
Jul 17 #Javascript
You might like
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python机器学习之决策树分类详解
2017/12/20 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
化学教师教学反思
2014/01/17 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
企业安全标语
2014/06/07 职场文书
师范毕业生求职信
2014/07/11 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
员工旷工检讨书
2015/08/15 职场文书
python实现双链表
2022/05/25 Python
Python四款GUI图形界面库介绍
2022/06/05 Python