您好,欢迎访问一九零五行业门户网

Google Map Api和GOOGLE Search Api整合实现代码_javascript技巧

将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 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 +
地址: + 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 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();
点击这里查看演示示例:经纬度查询整合本地搜索
其它类似信息

推荐信息