想用angular封装百度地图api,先吧最基础的异步加载完成,以后需要新功能在慢慢往上加,直接上code不废话。
申请百度秘钥API
http://lbsyun.baidu.com/apiconsole/key/create //创建应用获取AK
这一步不多讲,大家都会,不申请的同学可以使用我调试用的密钥。会在下面贴出来,只能调试用哦。
定义service
(function() {
'user strict'
var cartService = angular.module("cartService");
cartService.factory("map", ['$window', '$q', function($window, $q) {
return function(mapId, config) {
var _this = this;
//需要显示地图的元素
this.mapId = mapId;
//服务配置
this.config = config;
//地图对象
this.map=null;
//加载百度地图api方法
this.load = function() {
if (!$window.init) {
var script = document.createElement("script");
script.type = "text/javascript";
//url最后的callback=init,表示加载完成后调用window对象上的初始化方法。
script.src = "http://api.map.baidu.com/api?v=2.0&ak=ZGUEiBFZGP65MObPN6UGl24FAbGZPk1E &callback=init";
document.body.appendChild(script);
} else {
$window.init(this.mapId, this.config);
};
//定义初始化方法,挂到window对象上
$window.init = function(mapId, config) {
var mapId = mapId ? mapId : _this.mapId,
config = config ? config : _this.config,
point = null;
//实例化地图对象并把地图容器元素传入
_this.map = new BMap.Map(mapId),
//返回转换成百度坐标并返回promise对象
convertorPoint = _this.convertor(config.lng, config.lat);
//获取百度坐标
convertorPoint.then(function(data) {
var marker= null;
//将经度和纬度传入,返回经纬度对象
point = new BMap.Point(data.lng, data.lat);
//设置地图中心点和放大级数
_this.map.centerAndZoom(point, 12);
//设置地图覆盖物标记
marker = new BMap.Marker(point);
//将地图覆盖物标记添加到地图对象上
_this.map.addOverlay(marker);
}, function(error) {
console.warn(errro);
});
//config配置调用控件
config.copyright&&_this.copyright(config.copyright);
//滚轮放大缩小
_this.map.enableScrollWheelZoom();
};
};
//坐标转换成百度坐标方法
this.convertor = function(lng, lat) {
var pointArr = [],
point = new BMap.Point(lng, lat),
//实例化转换对象
convertor = new BMap.Convertor(),
deferred = $q.defer();
//将原坐标转成数组
pointArr.push(point);
//将坐标传入,获取百度坐标
convertor.translate(pointArr, 1, 5, function(data) {
if (data.status == 0) {
deferred.resolve(data.points[0]);
} else {
deferred.reject(data.status);
console.warn('坐标转换状态:' + data.status)
};
},{enableHighAccuracy: true});
//返回promise
return deferred.promise;
};
//地图版权
this.copyright=function(config){
if (!config) return;
var href = config.href,
name = config.name;
//实例化版权控件对象,将位置设置到右下角
var cr = new BMap.CopyrightControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});
//设置版权内容
cr.addCopyright({id:1,content:"<a href="+href+" target='_blank' title='"+name+"版权所有'>"+name+"</a>"});
//添加控件
this.map.addControl(cr);
};
}
}]);
})();
定义地图指令
(function() {
'use strict'
var cartDirective = angular.module("cartDirective");
cartDirective.directive("map", ['map','$parse',function(map,$parse) {
return {
restrict: "A",
scope: true,
link:function(scope,element,attrs){
//获取控制器中定义的地图配置config对象
var model = $parse(attrs.map);
var config = model(scope);
//实例化地图service,将指令元素作为容器传入
//传入config对象
var mapObj = new map(element[0],config);
//开始加载
mapObj.load();
}
};
}]);
})();
在控制器中配置地图属性
//地图配置
$scope.mapConfig={
//传入经度
lng:info.LNG,
//传入纬度
lat:info.LAT,
//版权信息配置
copyright:{
href:"http://blog.csdn.net/qq_33236453",
name:"林楠楠的脚趾有点咸"
}
};
最后只要在html中定义指令就完成了
<!-- 将配置传入指令中 -->
<div map="mapConfig" style="height: 474px;"></div>
最后
哪里写的不好,请大神们给个建议,或者有百度地图封装好的API能分享下吗(^o^)/
忘记把效果图贴上来了:-)