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系列(16) 闭包(Closures)
Apr 12 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
如何在Vue.js中实现标签页组件详解
Jan 02 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
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP生成随机密码类分享
2014/06/25 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
js函数调用的方式
2014/05/06 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python生成随机图形验证码详解
2017/11/08 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
教师推荐信范文
2013/11/24 职场文书
小区门卫工作职责
2013/12/14 职场文书
教师职位说明书
2014/07/29 职场文书
医德医魂心得体会
2014/09/11 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python