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 相关文章推荐
判断访客终端类型集锦
Jun 05 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
比较简单的异步加载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
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python内置函数OCT详解
2016/11/09 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
一份python入门应该看的学习资料
2018/04/11 Python
Python多继承原理与用法示例
2018/08/23 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
使用python turtle画高达
2020/01/19 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
公司离职证明标准格式
2014/11/18 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年导购员工作总结
2015/04/25 职场文书
通知书大全
2015/04/27 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android