想用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^)/
忘記把效果圖貼上來了:-)
