百度地图封装的JS函数

前端开发JavaScript 214

很多年前做的,刚才维护一个很老的项目突然看到的 lol,特地单独摘出来拿到博客里做备份

把下面内容保存成js文件,然后就可以在你的项目中使用啦,当然别忘记引入百度地图的api啊,效果图

百度地图封装的JS函数

核心文件

//MAP_CONTAINER, INPUT_address, INPUT_lng, INPUT_lat, INPUT_zoom, INPUT_title, INPUT_img, INPUT_summary, OPEN_infowindow
/*
 * render Single Marker On the Map 
 */
var renderBaiduMap = function(MAP_CONTAINER, INPUT_address, INPUT_lng, INPUT_lat, INPUT_zoom){
	$container = MAP_CONTAINER;
	$address = INPUT_address;
	$lng = INPUT_lng;
	$lat = INPUT_lat;
	$zoom = INPUT_zoom;
	if(arguments[5]) var $infoWindow = 1;
	var $title = arguments[5] ? arguments[5] : ''; 	
	var $img =  arguments[6] ? arguments[6] : '';
	var $summary =  arguments[7] ? arguments[7] : ''; 	
	var $open =  arguments[8] ? arguments[8] : 0;
	if(!$container || !document.getElementById($container))
	{
		alert('Map Container does not exists!');
		return false;
	}
	if(!$address && !($lng && $lat))
	{
		alert('Address and lng,lat invalid!');
		return false;
	}
	if(!$zoom) $zoom = 12;
	var map = new BMap.Map($container);
	
	//Hybrid switch
	var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
	map.addControl(mapType1);
	
	/**
	 * 添加放大缩小控件
	 */
	map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
	var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM }    
	map.addControl(new BMap.NavigationControl(opts));	
		
	//lng and lat first 
	if($lng && $lat)
	{
		
		var point = new BMap.Point($lng,$lat);
		map.centerAndZoom(point,$zoom);
		maker = new BMap.Marker(point);
		map.addOverlay(maker);		
		//maker info
		if($infoWindow == 1)		
		{
			var $Content =
			"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ $title +"</h4>";
			if($img) $Content += "<img style='float:right;margin:4px' id='infoImg' src='"+ $img +"' width='120' height='100' title='"+ $title +"'/>";
			if($summary) $Content +="<p style='margin:0;line-height:1.5;font-size:13px;'>"+ $summary +"</p>" + 
			"</div>";
			var infoWindow = new BMap.InfoWindow($Content);  // 创建信息窗口对象
			
			/**
			 * 默认打开信息窗口
			 */			
			if($open == 1)			
			{
			   maker.openInfoWindow(infoWindow);
			   //图片加载完毕重绘infowindow
			   infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片				
			}
			/**
			 * 点击打开信息窗口
			 */
			maker.addEventListener("click", function(){  
			   this.openInfoWindow(infoWindow);
			   //图片加载完毕重绘infowindow
			   if(document.getElementById('infoImg'))
			   {
				   document.getElementById('infoImg').onload = function (){
					   infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
				   }
			   }
			});			
		}
		//copy right
		/*
		var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});   //设置版权控件位置
		map.addControl(cr); //添加版权控件
	
		var bs = map.getBounds();   //返回地图可视区域
		cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀我是自定义版权控件呀</a>", bounds: bs});   
		//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数					
		*/
	}
	//address
	else
	{
		//by address
		if($address)
		{
			//console.log($address);
			var myGeo = new BMap.Geocoder();
			// 将地址解析结果显示在地图上,并调整地图视野
			myGeo.getPoint($address, function(point){
				if (point) {
					map.centerAndZoom(point, $zoom);
					maker = new BMap.Marker(point);
					map.addOverlay(maker);
					//maker info
					if($infoWindow == 1)		
					{
						var $Content =
						"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ $title +"</h4>";
						if($img) $Content += "<img style='float:right;margin:4px' id='infoImg' src='"+ $img +"' width='120' height='100' title='"+ $title +"'/>";
						if($summary) $Content +="<p style='margin:0;line-height:1.5;font-size:13px;'>"+ $summary +"</p>" + 
						"</div>";
						var infoWindow = new BMap.InfoWindow($Content);  // 创建信息窗口对象
						
						/**
						 * 默认打开信息窗口
						 */			
						if($open == 1)			
						{
						   maker.openInfoWindow(infoWindow);
						   //图片加载完毕重绘infowindow
						   infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片				
						}
						/**
						 * 点击打开信息窗口
						 */
						maker.addEventListener("click", function(){  
						   this.openInfoWindow(infoWindow);
						   //图片加载完毕重绘infowindow
						   if(document.getElementById('infoImg'))
						   {
							   document.getElementById('infoImg').onload = function (){
								   infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
							   }
						   }
						});			
					}								
				}
			});
			
		}
		//end by address
		else
		{
			return false;
		}
	}
}
/*
 * render Multiple Marker On the Map
 */
//load map for add multiple marker 
var loadBaiduMap = function(MAP_CONTAINER, INPUT_address, INPUT_lng, INPUT_lat, INPUT_zoom, INPUT_maptype){
	var $container  = MAP_CONTAINER;
	var $address = INPUT_address;
	var $lng = INPUT_lng;
	var $lat = INPUT_lat;
	var $zoom = arguments[4] ? arguments[4] : 12; 	
	var INPUT_maptype = arguments[5] ? arguments[5] : 1;
	/**
	 * 1 = BMAP_NORMAL_MAP		//此地图类型展示普通街道视图。
	 * 2 = BMAP_HYBRID_MAP		//此地图类型展示卫星和路网的混合视图。(自 1.2 新增)
	 * 3 = BMAP_SATELLITE_MAP	//此地图类型展示卫星视图。(自 1.2 新增)。
	 */
	switch(INPUT_maptype)
	{
		case 1:
			$maptype = BMAP_NORMAL_MAP;
		break;
		case 2:
			$maptype = BMAP_HYBRID_MAP;
		break;
		case 3:
			$maptype = BMAP_SATELLITE_MAP;
		break;
		default:
			$maptype = BMAP_NORMAL_MAP;
		break;
	}
	//console.log($maptype);
	if(!document.getElementById($container)) return false;
	// 创建全局Map实例
	window.mapMarkers = new BMap.Map($container,{mapType: $maptype}); 
	map = window.mapMarkers;
	var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
	map.addControl(mapType1);          //2D图,卫星图
	
	map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
	var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM }    
	map.addControl(new BMap.NavigationControl(opts));	
			
				
	if($lng && $lat)
	{
		var point = new BMap.Point($lng,$lat);
		map.centerAndZoom(point, $zoom);
	}
	else
	{
		if($address)
		{
			//console.log($address);
			var myGeo = new BMap.Geocoder();
			// 将地址解析结果显示在地图上,并调整地图视野
			myGeo.getPoint($address, function(point){
				if (point) {
					map.centerAndZoom(point, $zoom);
				}
			});
		}
	}
		
}
//add marker to map
var renderBaiduMapMaker = function(MAP_CONTAINER, INPUT_lng, INPUT_lat, INPUT_title, INPUT_img, INPUT_summary, INPUT_open)
{
	var $container  = MAP_CONTAINER;
	var $lng = INPUT_lng;
	var $lat = INPUT_lat;
	var $title = arguments[3] ? arguments[3] : ''; 	
	var $img =  arguments[4] ? arguments[4] : '';
	var $summary =  arguments[5] ? arguments[5] : ''; 	
	var $open =  arguments[6] ? arguments[6] : 0;	
	if(!document.getElementById($container)) return false;
	// 百度地图API功能
	/*
	 * 初始化地图
	 */
	map = window.mapMarkers;
	//map.centerAndZoom("中国",9);      // 初始化地图,用城市名设置地图中心点
	addMarker($lng,$lat);

    // 编写自定义函数,创建标注
	/*
	 * 生成标注核心函数
	 */
	function addMarker(lng,lat){
		var point = new BMap.Point(lng,lat);
		//map.centerAndZoom(point, $zoom);
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		//open infoWindow
		if($title)
		{
			var $Content =
			"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ $title +"</h4>";
			if($img) $Content += "<img style='float:right;margin:4px' id='infoImg' src='"+ $img +"' width='120' height='100' title='"+ $title +"'/>";
			if($summary) $Content +="<p style='margin:0;line-height:1.5;font-size:13px;'>"+ $summary +"</p>" + 
			"</div>";
			
			var infoWindow = new BMap.InfoWindow($Content);  // 创建信息窗口对象
			
			/**
			 * 默认打开信息窗口
			 */			
			if($open == 1)			
			{
			   marker.openInfoWindow(infoWindow);
			   //图片加载完毕重绘infowindow
			   infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片				
			}
			/**
			 * 点击打开信息窗口
			 */
			marker.addEventListener("click", function(){  
			   this.openInfoWindow(infoWindow);
			   //图片加载完毕重绘infowindow
			   if(document.getElementById('infoImg'))
			   {
				   document.getElementById('infoImg').onload = function (){
					   infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
				   }
			   }
			});			
		}
	}
}

使用方法

 window.onload = function() {
	loadBaiduMap('allmap','上海市','','',10,1);
	renderBaiduMapMaker('allmap',116.331398,39.897445,'title1','http://app.baidu.com/map/images/tiananmen.jpg','hello world');
	renderBaiduMapMaker('allmap',116.360575,39.997011,'title2','','中文测试中文测试中文测试中文测试中文测试');
	renderBaiduMapMaker('allmap',116.551447,39.929322,'title3','http://app.baidu.com/map/images/tiananmen.jpg','hello world');
	renderBaiduMapMaker('allmap',116.799811,40.056239,'title4','http://app.baidu.com/map/images/tiananmen.jpg','hello world');
 }

函数说明

loadBaiduMap是初始化百度地图控件,后面通过renderBaiduMapMaker函数来添加覆盖物,至于第一个函数renderBaiduMap好像没啥用了,具体里面也写了不少注释,自己看吧

Post Comment