调用百度地图Api实现的查看地图功能的小插件

1. 功能

bMap.js 可根据地理位置调用出百度地图，采用弹出框形式

2.用法

var city = ‘青岛市‘;
var address = ‘香港中路‘;
bMap.init({
	city : city,
	address : address
 });

3.依赖

需自行引入jquery以及layer.js(弹出框插件)

4. 局限

各模块之间耦合度过于紧密，插件化程度太低，依赖性太强

5. demo下载

地址 ：http://pan.baidu.com/s/1pJAxOnT

6. 源码预览

;!(function(window){
	window.bMap = {
		//默认配置
		config : {
			width : ‘700px‘,
			height : ‘500px‘,
			city : ‘北京市‘,
			address : ‘天安门‘,
			scaleControl : true,
			bMapApiUrl : ‘http://api.map.baidu.com/api?v=2.0&ak=C474e91657d303114af6e8df1931a392‘,
			bMapGeocoderUrl : ‘http://api.map.baidu.com/geocoder/v2/?ak=C474e91657d303114af6e8df1931a392&output=json‘
		},
		//中转方法，异步加载加载百度Api，
		initVariable : function(){
			if(!window.BMap){
				this.loadScript(bMap.config.bMapApiUrl+‘&callback=bMap.openMap‘);
			}else{
				this.openMap();
			}
		},
		//加载script
		loadScript : function(url){
			var script = document.createElement(‘script‘);
			script.setAttribute(‘type‘,‘text/javascript‘);
			script.setAttribute(‘src‘,url);
			document.body.appendChild(script);
		},
		//生成地图容器
		createMapContainer : function(){
			var mapContainer = document.createElement(‘div‘);
			mapContainer.setAttribute(‘id‘,‘mapContainer‘);
			mapContainer.style.width = this.config.width;
			mapContainer.style.height = this.config.height;
			document.body.appendChild(mapContainer);
			return mapContainer;
		},
		//确定坐标位置，并去初始化BMap
		openMap : function(){
			$.getJSON(bMap.config.bMapGeocoderUrl+"&address="+bMap.config.address+"&city="+bMap.config.city+"&callback=?",
	   		 function(data){
	    		if(data && data.status==0){
					bMap.createBMap && bMap.createBMap(data.result);
				}else{
					layer.msg(data.msg?data.msg:‘请求失败!‘);
				}
			});
		},
		//入口方法
		init : function(setings){
			this.config = $.extend({} , bMap.config , setings);
			this.initVariable();
		},
		//弹出遮罩层
		showLayer : function(domObj){
			var mylayer = $.layer({
				type: 1,
				title: false,
				closeBtn : [0 , true],
				border : [7, 0.1, ‘#222‘, true],
				shade : [0.5 , ‘#222‘ , true],
				offset: [‘30px‘,‘50%‘],
				//move: [‘.juanmove‘, false],
				area: [this.config.width,‘auto‘],
				page: {
					dom: domObj
				},
				close : function(){
					layer.close(mylayer);
					domObj.remove();// 移除dom节点，否则多次调用会导致地图显示异常
				}
			});
		},
		//调用百度地图api
		createBMap : function(initObj){
			var mapContainer = document.getElementById(‘mapContainer‘);
			if(!mapContainer){
				mapContainer = this.createMapContainer();
			}
			var map = new BMap.Map(mapContainer);    // 创建Map实例
			map.addControl(new BMap.MapTypeControl()); 	//地图类型组件
			map.addControl(new BMap.NavigationControl());
			if(this.config.scaleControl){
				map.addControl(new BMap.ScaleControl());
			}
			map.addControl(new BMap.OverviewMapControl());
			map.enableScrollWheelZoom();	//缩放
			var point = new BMap.Point(initObj.location.lng,initObj.location.lat);	//	初始化定位
			map.centerAndZoom(point, 16);  // 初始化地图,设置中心点坐标和地图级别
			map.clearOverlays();
			var marker = new BMap.Marker(point);  // 创建标注，为要查询的地址对应的经纬度
		    map.addOverlay(marker);
			this.showLayer(mapContainer);
		}
	}
})(window)