当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Google Map Api和GOOGLE Search Api整合实现代码

Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
浮动广告js类实现
使用透明叠加法美化文件上传界面的代码
用Div仿showModalDialog模式菜单的效果的代码
JsEasy简介 JsEasy是什么?与下载
网页屏蔽(左右键,代码等)的非JS方法
在IE模态窗口中自由查看HTML源码的方法
点下网页的任意地方,都可到达指定页面的js代码
实例学习Javascript之构建方法、属性
腾讯QQ网页在线客服,隐藏在网页一侧的隐现效果二
腾讯QQ网页在线客服,随网页滚动条上下移动的效果一
可以媲美Flash的JS导航菜单
js实现的XP风格的右键菜单
用JavaScript实现仿Windows关机效果
学习YUI.Ext基础第一天
学习YUI.Ext 第四天--对话框Dialog的使用
Gird组件 Part-3:范例RSSFeed Viewer
可缩放Reloaded-一个针对可缩放元素的复用组件
简单三步,搞掂内存泄漏
pjblog修改技巧汇总

Javascript 中的 Google Map Api和GOOGLE Search Api整合实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 260 ::
收藏到网摘: n/a

将GOOGLE MAP API 和 GOOGLE Search API 进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等,反过来标到地图上,并可在任意容器内显示。

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

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