angularjs 封装百度地图API（实现异步加载）

想用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^)/

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