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 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP静态文件生成类实例
2014/11/29 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
实例讲解PHP表单处理
2019/02/15 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
在Python中编写数据库模块的教程
2015/04/29 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
对python字典过滤条件的实例详解
2019/01/22 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
物联网工程专业推荐信
2014/09/08 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
专职安全员岗位职责
2015/04/11 职场文书
房屋维修申请报告
2015/05/18 职场文书
爱的教育观后感
2015/06/17 职场文书
学校财务管理制度
2015/08/04 职场文书