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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
Vue中的scoped实现原理及穿透方法
May 15 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
银行实习自我鉴定
2013/10/12 职场文书
幼儿园长自我鉴定
2013/10/17 职场文书
生日宴会主持词
2014/03/20 职场文书
关于建议书的格式范文
2014/05/20 职场文书
电气自动化求职信
2014/06/24 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python