posts - 310, comments - 6939, trackbacks - 0, articles - 3
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Google Map Api和GOOGLE Search Api整合扩展地图本地搜索

Posted on 2009-05-01 12:08 诗特林 阅读(2804) 评论(1)  编辑  收藏 所属分类: GIS

http://www.playgoogle.com/post/44.html 
将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(31121),
            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(thisfunction() {
            
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(1620);
            myIcon.iconAnchor 
= new GPoint(820);
            myIcon.shadow 
= "";
            
var mapSearch = new KMapSearch(map, {container:"cantingContainer",latlng:initPt,icon:myIcon,keyWord:"餐厅"});
            mapSearch.clearAll();
            mapSearch.execute();

 

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


评论

# re: Google Map Api和GOOGLE Search Api整合扩展地图本地搜索  回复  更多评论   

2009-06-25 22:31 by Guoxin
你好,你知道在window桌面怎样用Google Search API 吗? 我的需求是这样的:在TextBox输入要搜索的关键字,把搜索的结果显示在Gridview里面。我的邮箱是guoxinliu917@gmail.com. 希望能得到你的帮助。谢谢!!!

只有注册用户登录后才能发表评论。


网站导航: