想用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});//返回promisereturn 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^)/

忘记把效果图贴上来了:-)