百度地图应用
包含功能:根据地名获取经纬度、根据经纬度获取地址信息、移动到指定经纬度、添加点(自定义),获取当前位置信息,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);//动态设置地图类型