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)