1. 功能

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

2.用法

var city = '青岛市';

var address = '香港中路';

bMap.init({

city : city,

address : address

});

3.依赖

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

4. 局限

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

5. demo下载

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)