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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
ES6 Set结构的应用实例分析
Jun 26 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
Vue v-text指令简单使用方法示例
Sep 19 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
js验证密码强度解析
2020/03/18 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
学校岗位设置方案
2014/01/16 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
大学生实习证明
2015/06/16 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫