简明现代魔法 -> 软件项目 -> Google Maps 和 LocalSearch 整合

Google Maps 和 LocalSearch 整合

2010-01-03

将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 + "
地址:" + 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();  

查看例子

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们