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的new操作符(一)
Dec 25 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
删除节点的jquery代码
Jan 13 Javascript
Express.JS使用详解
Jul 17 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
如何开发一个渐进式Web应用程序PWA
May 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
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
JS input 数字验证代码
2009/07/30 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
酒店采购员岗位职责
2014/03/14 职场文书
医学专业大学生求职信
2014/07/12 职场文书
校长四风对照检查材料
2014/09/27 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书