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();

点击这里查看演示示例:经纬度查询整合本地搜索

(0)

相关推荐

  • jquery与google map api结合使用 控件,监听器

    Google Maps JavaScript. API可以让您在自己的网页上使用Google地图.在使用API之前,您应该先申请一 个API key,申请API key请到:http://code.google.com/apis/maps/signup.html.这里假设你获取到的key是:ABQIAA. 关于jquery的获取不再此处累赘,网上有许多关于jquery的介绍. 接着我们就使用JQuery和Google Maps JavaScript. API来结合表现一下google map的有

  • 用Google Sitemaps帮助你SEO

    用Google Sitemaps帮助你SEO 作者:Matthew Coers 译者:Sheneyan(子乌) 时间:2006.07.12 英文原文: Search Engine Optimization with Google Sitemaps 中文译文地址:用Google Sitemaps帮助你SEO (子乌注:这篇文章对google推出的免费服务google sitemap进行了一些应用上的分析,对于优化站点能起到很大帮助.) 什么是Google Sitemaps? Google Site

  • Google Maps API地图应用示例分享

    效果(新版Firefox中测试): 代码: <!DOCTYPE><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="text/javascript" src="http://

  • Google Map API更新实现用户自定义标注坐标

    演示地址:http://www.yaohaixiao.com/effects/google-map.html 复制代码 代码如下: if(typeof GoogleMap === 'undefined'){ var GoogleMap = {}; } (function(){ if (!document.getElementById("fgmap")) { return false; } else { // 是否可创建Google地图控件 var isCompatible = new

  • 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\经纬度值

  • Google (Local) Search API的简单使用介绍

    花了两天的时间来用Google的API来做这么一个小东西,其实真正的实现代码不是很多,十几行而已.费时间的工作是了解各个API的功能以及调试JavaScript. 下面简单介绍一下这次我用到的几个函数吧. •构造函数google.search.LocalSearch() 这其实是创建了一个LocalSearch的Service,这个Service和其他Service(News, Blog, Web)一样,是供SearchControl使用的.这些Service决定了SearchControl的能

  • PHP访问Google Search API的方法

    本文实例讲述了PHP访问Google Search API的方法.分享给大家供大家参考.具体如下: 这段代码段演示了如何从php向AJAX搜索API发送请求.请注意,此示例假定使用 PHP 5.2.对于较早安装的 PHP,请参考对应的官方注释. 具体代码如下: 复制代码 代码如下: $url = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton";   // sendReque

  • Javascript计算两个marker之间的距离(Google Map V3)

    Google Map V3 javascript计算两个marker之间的距离 做地图开发,最常用到的就是marker一些操作和交互.简单介绍一下,两个marker之间的距离计算. google map api 很方便的 只要是常用的 基本上都有接口. 1.创建两个marker点 复制代码 代码如下: var oldMarker = new google.maps.Marker({ position: new google.maps.LatLng("31.95678", "1

  • 利用Yahoo! Search API开发自已的搜索引擎-php版

    美国东部时间3月1日,雅虎公司联合创始人之一的杨致远将宣布公司的搜索网络将进入Web服务.雅虎公司在www.developer.yahoo.com网站建立了Yahoo Search Developer Network,公司计划在此纽约举行的搜索引擎战略大会(Search Engine Strategies Conference)上推出这一计划.该网络将允许开发者在雅虎搜索之上建立新的应用程序,其中包括图像.视频.新闻以及地区搜索等内容.想要使用这项服务的会员必须先去http://api.sear

  • Ruby中的类Google Map/Reduce框架Skynet介绍

    Skynet是一个很响亮的名字,因为它是阿诺施瓦辛格主演的经典系列电影<终结者>里面的统治人类的超级计算机网络.不过本文的Skynet没这么恐怖,它是一个ruby版本的Google Map/Reduce框架的名字而已. Google的Map/Reduce框架实在太有名气了,他可以把一个任务切分为很多份,交给n台计算机并行执行,返回的结果再并行的归并,最后得到运算的结果.据说Google一个搜索结果会Map到7000台服务器并行执行,这么多么可怕的分布式运算能力阿!有了Map/Reduce,程序

  • es6系列教程_ Map详解以及常用api介绍

    ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 '0'会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = new Map(); 常用方法: set( 键,值 ): 添加新的键值对元素 get( 键 ): 获取键对应的值,如果这个值不存在,返回undefined let map = new Map(); map.set( '0', 'ghostwu' ); map.set( 0, 'ghostwu' )

  • 微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

    本文实例讲述了微信小程序map组件结合高德地图API实现wx.chooseLocation功能.分享给大家供大家参考,具体如下: 声明 bug: 页面搜索返回的列表在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 通过高德地图的微信小程序开发API(getInputtips),实现关

  • Google 地图控件集详解及实例代码

    Google 地图控件集 Google 地图 - 默认控件集设置: 当使用一个标准的google地图,它的默认设置如下: 1.Zoom-显示一个滑动条来控制map的Zoom级别 2.PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图 3.MapType-允许用户在map types(roadmap 和 satallite)之间切换 4.StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景 Google 地图 - 更多控件集 除了以上默认控件集,Google还有

随机推荐