百度地图应用

百度地图的应用

/*
*文档 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
*实例 http://lbsyun.baidu.com/jsdemo.html
*类库实例 http://lbsyun.baidu.com/index.php?title=open/library
*createBy Zengwe
*/
var map=(function(){
    function map(config){
        this.baidu=null
        this.default={
            id:"map",
            level:6,
            enableScrollWheelZoom:true,
            enableDragging:true,
            perfectScrollbar:true,//是否用到jquery的perfectScrollbar
            img:{
                red:{
                    src:"/static/img/weichulishijian.png",
                    width:23,
                    height:45,
                    ofsetTop:0,
                    ofsetLeft:0
                },
                blue:{
                    src:"/static/img/yichulishijian.png",
                    height:45,
                    width:23,
                    ofsetTop:0,
                    ofsetLeft:0
                },
                purple:{
                    src:"/static/img/qitazhuangtai.png",
                    width:23,
                    height:45,
                    ofsetTop:0,
                    ofsetLeft:0
                }
            },
            infoWindow:{
                width:400,//220 - 730
                height:300,//60 - 650
                ofsetTop:-15,
                ofsetLeft:0
            },
            bounds:{
                left:{

                }
            },
            size:{
                max:20,
                min:0
            }

        }
        this.options = $.extend({}, this.default, config)
        delete this.default;
        this.init();
    }
    map.prototype.init=function(){
        this.baidu= new BMap.Map(this.options.id,{mapType:BMAP_NORMAL_MAP,minZoom:this.options.size.min,maxZoom:this.options.size.max});    // 创建Map实例
        this.baidu.centerAndZoom(new BMap.Point(116.404, 39.915), this.options.level);
        if (this.options.enableScrollWheelZoom) {
            this.baidu.enableScrollWheelZoom(true);
        }
        if(!this.options.enableDragging){
            this.baidu.disableDragging();
        }
        this.event();
    }
    map.prototype.event=function(){
        this.baidu.addEventListener("click",function(){
            $(".mapEventAccept").trigger("click");
        });
    }
    // 设置地图的显示大小
    map.prototype.setZoom=function(num){
        if(!isNaN(num)&&num>0&&num<20&&parseInt(num)==num){
            this.baidu.setZoom(num)
        }else{
            return false;
        }
    }
    map.prototype.setCenter=function(lnt,lat){
        this.baidu.centerAndZoom(new BMap.Point(lnt,lat),this.options.level);
    }
    map.prototype.moveTo=function(lnt,lat,needMark,callback){
        var _this=this;
        var point=new BMap.Point(lnt,lat);
        this.baidu.panTo(point); 
        if(callback!=undefined){
            callback();
        }
        this.setZoom(10);
        if(needMark==undefined||needMark==true){
            var marker=new BMap.Marker(point);
            this.baidu.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            setTimeout(function(){
                _this.baidu.removeOverlay(marker);
            }, 3000);
        }
    }
    map.prototype.setCenterByName=function(name){
        this.getPoint(name,function(that,lnt,lat){
            that.setCenter(lnt,lat); 
        });
    }
    map.prototype.moveToByName=function(name,needMark,callback){
        var _this=this;
        this.getPoint(name,function(that,lnt,lat){
            that.moveTo(lnt,lat,needMark,callback);
        });
    }
    //根据名字获取点的信息
    map.prototype.getPoint=function(name,callback){
        var _this=this;
        var local = new BMap.LocalSearch(name);
        local.search(name);
        //获取检索到的地址信息
        local.setSearchCompleteCallback(function(res){
            if(_this,res.ur.length<1){
                //没有搜索到相关地理信息
            }else {
                callback(_this,res.ur[0].point.lng,res.ur[0].point.lat);
            }          
        });    
    }
    /**
    *arr中用{jinddu,weidu,fujiashuju}
    *[{id:123,event_type:1,pub_time,descripe,imgs:["sss","sss"],lnt:经度,lat:维度}]
    *
    */
    map.prototype.addPoint=function(pointArr){
        var _this=this;
        var infoWindow = new BMap.InfoWindow("sContent",{
                width:this.options.infoWindow.width,
                height:this.options.infoWindow.height,
                offset:new BMap.Size(this.options.infoWindow.ofsetLeft,this.options.infoWindow.ofsetTop)
            });
        $("#wrapper").perfectScrollbar();
        for(var i=0;i<pointArr.length;i++){
            var pt = new BMap.Point(pointArr[i].lnt, pointArr[i].lat);
            var myIcon=null;
            switch (pointArr[i].status) {
                case 0:
                    myIcon=new BMap.Icon(
                        this.options.img.red.src,
                        new BMap.Size(this.options.img.red.width,this.options.img.red.height),
                        {imageOffset:new BMap.Size(this.options.img.red.ofsetLeft,this.options.img.red.ofsetTop)}
                    );
                    break;
                case 1:
                    myIcon=new BMap.Icon(
                        this.options.img.blue.src,
                        new BMap.Size(this.options.img.blue.width,this.options.img.blue.height),
                        {imageOffset:new BMap.Size(this.options.img.blue.ofsetLeft,this.options.img.blue.ofsetTop)}
                    );
                    break;
                default:
                    myIcon=new BMap.Icon(
                        this.options.img.purple.src,
                        new BMap.Size(this.options.img.purple.width,this.options.img.purple.height),
                        {imageOffset:new BMap.Size(this.options.img.red.ofsetLeft,this.options.img.red.ofsetTop)}
                    );
                    break;
            }
            var marker = new BMap.Marker(pt,{icon:myIcon});
            this.baidu.addOverlay(marker);
            marker.myData=pointArr[i];
            marker.addEventListener("click", function(e){
                var html=_this.formateContent(this.myData);
                infoWindow.setContent(html);
                this.openInfoWindow(infoWindow);
                _this.BindInfoWindowEvent();
                if(_this.options.perfectScrollbar){
                    $("#wrapper").perfectScrollbar({suppressScrollX:true});
                    $("#wrapper").perfectScrollbar('update');                      
                }          
            })
            marker.addEventListener("close",function(e,infoWindow){
                //infoWindow.setContent("ddd");
            });
        }
    }
    map.prototype.formateContent=function(data){
        var imgHtml="";
        for(var i=0;i<data.images.length;i++){
            imgHtml+='<li>'+
                        '<img src="'+data.images[i]+'" alt="">'+
                    '</li>';
        }      
        var str='<div id="wrapper" style="overflow:hidden;position:relative;height:'+this.options.infoWindow.height+'px">'+
            '<div class="maplable">'+
                '<ul class="contentlist">'+
                    '<li>'+
                        '<span class="label">事件内容：</span>'+
                        '<span class="value">'+data.type_string+'</span>'+
                    '</li>'+
                    '<li>'+
                        '<span class="label">事件状态：</span>'+
                        '<span class="value">已处理</span>'+                          
                    '</li>'+
                    '<li>'+
                        '<span class="label">上报时间：</span>'+
                        '<span class="value">'+formateDate(data.time)+'</span>'+                           
                    '</li>'+
                    '<li>'+
                        '<span class="label">事件描述：</span>'+
                        '<span class="value">'+data.describe+'</span>'+            
                    '</li>'+                     
                '</ul>'+
                '<ul class="image-area">'+
                    imgHtml+
                '</ul>'+
            '</div>'+
            '</div>'
            ;      
        return str;
    }
    //根据浏览器获取当前的位置信息回调参数callback(point)
    map.prototype.currLocation=function(callback,needMove){
        var _this=this;
        var geolocation = new BMap.Geolocation();
        _this.moveToByName("北京市",false);//好像是百度的bug第一次移动时总是移动不到指定位置就停下来，所以先把第一用了
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                if(needMove==undefined||needMove==true){
                    var name="";
                    if(r.address.city!=""){
                        name=r.address.city;
                    }else if(r.address.province!=""){
                        name=r.address.province;
                    }else{
                        name="北京市"
                    }
                    setTimeout(function(){
                        _this.moveToByName(name,false)     
                    }, 500)

                }
                if(callback!=undefined){
                    callback(r);
                }
            }
            else {
                //alert('failed'+this.getStatus());
            }       
        },{enableHighAccuracy: true});     
    },
    map.prototype.removeOverlay=function(){

    },
    map.prototype.clearOverlays=function(){
        this.baidu.clearOverlays();
    }
    //addcomp{province:"",city:"",district:"",streetNumber:""}
    map.prototype.getNameByPoint=function(lng,lat,callback){
        var geoc = new BMap.Geocoder();
        geoc.getLocation({lng:lng,lat:lat}, function(rs){
            var addComp = rs.addressComponents;
            if(callback!=undefined){
                callback(addComp);
            }
        });     
    }
    map.prototype.BindInfoWindowEvent=function(){
        //在外面重写infoWindow的事件
    }
    return map;
})($)

几乎还是用到了百度地图的大部分功能大部分