百度地图应用

包含功能:根据地名获取经纬度、根据经纬度获取地址信息、移动到指定经纬度、添加点(自定义),获取当前位置信息,infoWindow的实现,设置中心点

/*
*文档 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
*createByZengwe
*/
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;
})($)
设置默认的地图类型var map = new BMap.Map("allmap",{mapType:BMAP_SATELLITE_MAP}); 
map.setMapType(BMAP_SATELLITE_MAP);//动态设置地图类型

  

posted @ 2017-05-11 17:13  米斯特尔曾  阅读(155)  评论(0编辑  收藏  举报