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语言结构小记(一)
Sep 10 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python脚本实现格式化css文件
2015/04/08 Python
python魔法方法-自定义序列详解
2016/07/21 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
abstract是什么意思
2012/02/12 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
《锄禾》教学反思
2014/04/08 职场文书
离职感谢信
2015/01/21 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
感恩教育主题班会
2015/08/12 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
MySQL 计算连续登录天数
2022/05/11 MySQL