zoukankan      html  css  js  c++  java
  • 百度地图应用

    包含功能:根据地名获取经纬度、根据经纬度获取地址信息、移动到指定经纬度、添加点(自定义),获取当前位置信息,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",
    					23,
    					height:45,
    					ofsetTop:0,
    					ofsetLeft:0
    				},
    				blue:{
    					src:"/static/img/yichulishijian.png",
    					height:45,
    					23,
    					ofsetTop:0,
    					ofsetLeft:0
    				},
    				purple:{
    					src:"/static/img/qitazhuangtai.png",
    					23,
    					height:45,
    					ofsetTop:0,
    					ofsetLeft:0
    				}
    			},
    			infoWindow:{
    				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",{
    				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);//动态设置地图类型

      

  • 相关阅读:
    django-orm基础字段及选项1
    django-模型层
    django-应用及分布式路由
    django-static配置静态文件
    django-url反向解析
    django-url路径书写规范
    django-模板继承 block、endblock、 extend
    详解HTML中的表单元素
    详解HTML中的表格标签
    jQuery和AJAX基础
  • 原文地址:https://www.cnblogs.com/catchingdream/p/6841791.html
Copyright © 2011-2022 走看看