Want to use angular package Baidu map api, to bar the most basic asynchronous loading is complete, the new features in the future need to slowly add up, directly on the code is not nonsense.
Apply for Baidu API keys
http://lbsyun.baidu.com/apiconsole/key/create //创建应用获取AKThis step will not say, we all, students can not apply for debugging using my key. It will be posted in the following, only for debugging oh.
Definition of 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);
};
}
}]);
})();Custom Map command
(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();
}
};
}]);
})();Map configuration properties in the controller
//地图配置
$scope.mapConfig={
//传入经度
lng:info.LNG,
//传入纬度
lat:info.LAT,
//版权信息配置
copyright:{
href:"http://blog.csdn.net/qq_33236453",
name:"林楠楠的脚趾有点咸"
}
};Finally, as long as the instruction is defined in html is complete
<!-- 将配置传入指令中 -->
<div map="mapConfig" style="height: 474px;"></div>At last
Where is badly written, please the great God who Geigejianyi, or have Baidu Maps API to share packaged under it (^ o ^) /
Forget the renderings Tieshanglai :-)
