├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── dist
    └── angular-bmap.min.js
├── index.html
├── package.json
└── src
    └── angular-bmap.js


/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | "**/.*",
3 | "node_modules",
4 | "bower_components",
5 | "test",
6 | "tests"
7 | node_modules
8 | bower_components
9 | .idea


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/douxc/angular-BMap/3f1e5bdf8c69d4f0ba22b12f96cac2715e1b0d7c/Gruntfile.js


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 douxc
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # angular-BMap
 2 | 1. angularjs简单封装百度地图;
 3 | 2. 在app.js中引用angularMap模块,如：angular.module('bMapApp', ['angularMap']);
 4 | 3. 所有方法均返回promise对象
 5 | 
 6 | ##使用Bower安装
 7 | bower install angular-BMap --save或bower install douxc/angular-BMap --save
 8 | ##默认中心点设置
 9 | angularBMapProvider.setDefaultPosition(lng,lat)
10 | >默认中心点为南京
11 | 
12 | ##initMap
13 | 初始化地图操作
14 | ##geoLocation
15 | 获取当前位置
16 | ##geoLocationAndCenter
17 | 获取当前位置，并将地图中心点移到该位置
18 | ##drawPoints
19 | 向地图添加兴趣点
20 | >1. 兴趣点格式只支持array和object，且必须含有loc对象；<br/>
21 | 如{loc: {lng: 121.496011, lat: 31.244085}}、<br/>
22 | {loc: '121.493065,31.244981'}、<br/>
23 | [{loc: {lng: 121.496011, lat: 31.244085}},{loc: '121.493065,31.244981'}]<br/>均可以添加
24 | 2. 不支持的兴趣点格式不会添加到地图上，不影响正确的格式添加；<br/>
25 | 如[{loc: {lng: 121.496011, lat: 31.244085}},<br/>{lod: '121.494215,31.243005'},<br/>{loc: '121.493065,31.244981'}]<br/>只有第1、3两个点会添加到地图上；<br/>
26 | 3. 错误信息会通过defer.notify()返回；格式：第 ?个兴趣点loc对象不存在或格式错误，只支持object和string;
27 | 4. 当前处理进度（第n个兴趣点）也会通过defer.notify()返回；需要自己处理
28 | 
29 | ##drawMarkersAndSetOnclick
30 | 向地图添加兴趣点，同时添加点击事件
31 | >1. 传入参数：<br/>1）markers 参考drawPoints；<br/>2）onClick - function 点击事件，在点击事件中可以通过this.obj获取当前markers对象<br/>
32 | 2. 默认点击事件是将地图中心点移动到点击的位置
33 | 
34 | ##默认的地图指令angularBmap
35 | 使用方式：\<angular-bmap\>\</angular-bmap\>


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-BMap",
 3 |   "version": "0.0.1",
 4 |   "homepage": "https://github.com/douxc/angular-BMap",
 5 |   "authors": [
 6 |     "douxc"
 7 |   ],
 8 |   "description": "angular-bmap",
 9 |   "keywords": [
10 |     "angular-BMap"
11 |   ],
12 |   "license": "MIT",
13 |   "ignore": [
14 |     "**/.*",
15 |     "node_modules",
16 |     "bower_components",
17 |     "test",
18 |     "tests"
19 |   ],
20 |   "dependencies": {
21 |     "angular": "~1.4.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/dist/angular-bmap.min.js:
--------------------------------------------------------------------------------
1 | /*! angular-BMap - v0.0.1 - 2015-06-23 */
2 | !function(a,b){"use strict";function c(){function a(a,c){function d(){return k||(k=new BMap.Map("bMap")),k}function e(){var b=a.defer();return c(function(){d().centerAndZoom(l,14),b.resolve()}),b.promise}function f(){var b=a.defer(),c=new BMap.Geolocation;return c.getCurrentPosition(function(a){this.getStatus()===BMAP_STATUS_SUCCESS?b.resolve(a):b.reject("不能获取位置")},function(a){b.reject("定位失败")}),b.promise}function g(){var b=a.defer();return f().then(function(a){d().panTo(a.point);var c=new BMap.Marker(a.point);d().addOverlay(c),b.resolve(a)},function(a){d().panTo(l);var c=new BMap.Marker(l);d().addOverlay(c),b.reject("定位失败")}),b.promise}function h(e){var f,g,h,i=[],j=a.defer();return c(function(){return e?(b.isArray(e)?e[0].loc?i=e:j.reject("获取不到loc对象信息"):e.loc?i.push(e):j.reject("获取不到loc对象信息"),g=i.length-1,void b.forEach(i,function(a,c){h=c,b.isObject(a.loc)?f=new BMap.Point(a.loc.lng,a.loc.lat):b.isString(a.loc)?f=new BMap.Point(a.loc.split(",")[0],a.loc.split(",")[1]):h="第"+c+"个兴趣点loc对象不存在或格式错误，只支持object和string";var e=new BMap.Marker(f);d().addOverlay(e),j.notify(h),c===g&&j.resolve()})):void j.reject("没有传入兴趣点")}),j.promise}function i(){d().panTo(this.point)}function j(e,f){var g,h,j,k,l=[],m=a.defer();return k=f?f:i,c(function(){return e?(b.isArray(e)?e[0].loc?l=e:m.reject("获取不到loc对象信息"):e.loc?l.push(e):m.reject("获取不到loc对象信息"),h=l.length-1,void b.forEach(l,function(a,c){j=c,b.isObject(a.loc)?g=new BMap.Point(a.loc.lng,a.loc.lat):b.isString(a.loc)?g=new BMap.Point(a.loc.split(",")[0],a.loc.split(",")[1]):j="第"+c+"个兴趣点loc对象不存在或格式错误，只支持object和string";var e=new BMap.Marker(g);e.obj=a,e.addEventListener("click",k),d().addOverlay(e),m.notify(j),c===h&&m.resolve()})):void m.reject("没有传入兴趣点")}),m.promise}var k,l=this.default_position;return{initMap:e,getMap:d,geoLocation:f,geoLocationAndCenter:g,drawMarkers:h,drawMarkersAndSetOnclick:j}}this.default_position=new BMap.Point(118.789572,32.048667),this.setDefaultPosition=function(a,b){return this.default_position=new BMap.Point(a,b),this},this.$get=a,a.$inject=["$q","$timeout"]}function d(a){function b(a,b,c,d){d.initMap(),d.geoLocationAndCenter().then(function(a){console.log(a)},function(a){console.info(a)});var e=[{loc:{lng:121.496011,lat:31.244085}},{lod:"121.494215,31.243005"},{loc:"121.493065,31.244981"},{lod:"121.49691,31.239454"},{loc:"121.502515,31.243622"}];d.drawMarkersAndSetOnclick(e).then(function(a){console.log("兴趣点添加完成")},function(a){console.log(a)},function(a){console.log(a)})}function c(){this.geoLocation=a.geoLocation,this.initMap=a.initMap,this.geoLocationAndCenter=a.geoLocationAndCenter,this.drawMarkers=a.drawMarkers,this.drawMarkersAndSetOnclick=a.drawMarkersAndSetOnclick}return{restrict:"EAC",replace:!0,scope:!0,template:'<div id="bMap" style="height: 100%;"></div>',link:b,controller:c}}var e=b.module("angularBMap",[]);e.provider("angularBMap",c),e.directive("angularBmap",d),d.$inject=["angularBMap"]}(window,window.angular);


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html class="no-js" ng-app="bMapApp">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>map</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="description" content="">
 8 |     <meta name="keywords" content="">
 9 |     <meta name="viewport"
10 |           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
11 |     <!-- Set render engine for 360 browser -->
12 |     <meta name="renderer" content="webkit">
13 |     <!-- No Baidu Siteapp-->
14 |     <meta http-equiv="Cache-Control" content="no-siteapp"/>
15 |     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
16 |     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=mVXVL4BToC5F7LZYE5ARS5ON"></script>
17 |     <style>
18 |         body, html {
19 |             height: 100%;
20 |             margin: 0;
21 |         }
22 |     </style>
23 | </head>
24 | <body ng-controller="AngularMapCtrl">
25 | <!--[if lt IE 7]>
26 | <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
27 |     your browser</a> to improve your experience.</p>
28 | <![endif]-->
29 | <ng-view>
30 |     <angular-bmap></angular-bmap>
31 | </ng-view>
32 | <script src="bower_components/angular/angular.min.js"></script>
33 | <!--<script src="src/angular-bmap.js"></script>-->
34 | <script src="dist/angular-bmap.min.js"></script>
35 | <script>
36 |     (function () {
37 |         angular.module('bMapApp', ['angularBMap'])
38 |                 .config(['angularBMapProvider', function (angularBMap) {
39 |                     angularBMap.setDefaultPosition(121.49576, 31.240998);//设置默认中心点
40 |                 }]).controller('AngularMapCtrl', ['$scope',
41 |                     function ($scope) {
42 | 
43 |                     }]);
44 |     })();
45 | </script>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-BMap",
 3 |   "version": "0.0.1",
 4 |   "description": "angular bmap",
 5 |   "main": "Gruntfile.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/douxc/angular-BMap.git"
12 |   },
13 |   "author": "dxc",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/douxc/angular-BMap/issues"
17 |   },
18 |   "homepage": "https://github.com/douxc/angular-BMap",
19 |   "devDependencies": {
20 |     "grunt": "^0.4.5",
21 |     "grunt-contrib-concat": "^0.5.1",
22 |     "grunt-contrib-jshint": "^0.11.2",
23 |     "grunt-contrib-uglify": "^0.9.1",
24 |     "grunt-contrib-watch": "^0.6.1",
25 |     "grunt-jsdoc-to-markdown": "^1.1.1",
26 |     "grunt-strip": "^0.2.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/angular-bmap.js:
--------------------------------------------------------------------------------
  1 | /***
  2 |  * angularjs 使用指令封装百度地图
  3 |  * Created by xc on 2015/6/13.
  4 |  */
  5 | (function (window, angular) {
  6 |   'use strict';
  7 |   var angularMapModule = angular.module('angularBMap', []);
  8 |   angularMapModule.provider('angularBMap', mapService);//定位服务
  9 |   angularMapModule.directive('angularBmap', mapDirective);//定位指令
 10 |   /*
 11 |    * 定位相关服务
 12 |    */
 13 |   function mapService() {
 14 |     //基础配置
 15 |     this.default_position = new BMap.Point(118.789572, 32.048667);//地图默认中心点
 16 |     /**
 17 |      * 设置地图默认中心点
 18 |      * @param lng
 19 |      * @param lat
 20 |      * @returns {mapService}
 21 |      */
 22 |     this.setDefaultPosition = function (lng, lat) {
 23 |       this.default_position = new BMap.Point(lng, lat);
 24 |       return this;
 25 |     };
 26 | 
 27 |     //返回的服务
 28 |     this.$get = BMapService;
 29 |     BMapService.$inject = ['$q', '$timeout'];
 30 |     function BMapService($q, $timeout) {
 31 |       var map,//全局可用的map对象
 32 |         default_position = this.default_position;//默认中心点
 33 |       return {
 34 |         initMap: initMap,//初始化地图
 35 |         getMap: getMap,//返回当前地图对象
 36 |         geoLocation: geoLocation,//获取当前位置
 37 |         geoLocationAndCenter: geoLocationAndCenter,//获取当前位置，并将地图移动到当前位置
 38 |         drawMarkers: drawMarkers,//添加兴趣点
 39 |         drawMarkersAndSetOnclick: drawMarkersAndSetOnclick//添加兴趣点同时添加点击事件
 40 |       };
 41 |       /**
 42 |        * 获取map对象
 43 |        * @alias getMap
 44 |        */
 45 |       function getMap() {
 46 |         if (!map) {
 47 |           map = new BMap.Map('bMap');//地图对象
 48 |         }
 49 |         return map;
 50 |       }
 51 | 
 52 |       /**
 53 |        * 初始化地图
 54 |        * @constructor
 55 |        */
 56 |       function initMap() {
 57 |         var defer = $q.defer();
 58 |         $timeout(function () {
 59 |           getMap().centerAndZoom(default_position, 14);
 60 |           defer.resolve();
 61 |         });
 62 |         return defer.promise;
 63 |       }
 64 | 
 65 |       /**
 66 |        * 调用百度地图获取当前位置
 67 |        * @constructor
 68 |        */
 69 |       function geoLocation() {
 70 |         var defer = $q.defer(), location = new BMap.Geolocation();//百度地图定位实例
 71 |         location.getCurrentPosition(function (result) {
 72 |           if (this.getStatus() === BMAP_STATUS_SUCCESS) {
 73 |             //定位成功,返回定位地点和精度
 74 |             defer.resolve(result);
 75 |           } else {
 76 |             defer.reject('不能获取位置');
 77 |           }
 78 |         }, function (err) {
 79 |           defer.reject('定位失败');
 80 |         });
 81 |         return defer.promise;
 82 |       }
 83 | 
 84 |       /**
 85 |        * 获取当前位置，并将地图移动到当前位置
 86 |        * @constructor
 87 |        */
 88 |       function geoLocationAndCenter() {
 89 |         var defer = $q.defer();
 90 |         geoLocation().then(function (result) {
 91 |           getMap().panTo(result.point);
 92 |           var marker = new BMap.Marker(result.point);
 93 |           getMap().addOverlay(marker);
 94 |           defer.resolve(result);
 95 |         }, function (err) {
 96 |           //定位失败
 97 |           getMap().panTo(default_position);
 98 |           var marker = new BMap.Marker(default_position);
 99 |           getMap().addOverlay(marker);
100 |           defer.reject('定位失败');
101 |         });
102 |         return defer.promise;
103 |       }
104 | 
105 |       /**
106 |        * 向地图添加兴趣点（marker）
107 |        * @param markers
108 |        */
109 |       function drawMarkers(markers) {
110 |         var _markers = [],//待添加的兴趣点列表
111 |           defer = $q.defer(),
112 |           point,//当前添加的坐标点
113 |           _length,//数组长度
114 |           _progress;//当前正在添加的点的索引
115 |         $timeout(function () {
116 |           //判断是否含有定位点
117 |           if (!markers) {
118 |             defer.reject('没有传入兴趣点');
119 |             return;
120 |           }
121 |           //传入了参数
122 |           if (!angular.isArray(markers)) {
123 |             //传入的不是array
124 |             if (markers.loc) {
125 |               _markers.push(markers);
126 |             } else {
127 |               defer.reject('获取不到loc对象信息');
128 |             }
129 |           } else {
130 |             if (markers[0].loc) {
131 |               _markers = markers;
132 |             } else {
133 |               defer.reject('获取不到loc对象信息');
134 |             }
135 |           }
136 |           _length = _markers.length - 1;
137 |           angular.forEach(_markers, function (obj, index) {
138 |             _progress = index;
139 |             if (angular.isObject(obj.loc)) {
140 |               point = new BMap.Point(obj.loc.lng, obj.loc.lat);
141 |             } else if (angular.isString(obj.loc)) {
142 |               point = new BMap.Point(obj.loc.split(',')[0], obj.loc.split(',')[1]);
143 |             } else {
144 |               _progress = '第' + index + '个兴趣点loc对象不存在或格式错误，只支持object和string';
145 |             }
146 |             var marker = new BMap.Marker(point);
147 |             getMap().addOverlay(marker);
148 |             defer.notify(_progress);
149 |             if (index === _length) {
150 |               defer.resolve();
151 |             }
152 |           });
153 |         });
154 |         return defer.promise;
155 |       }
156 | 
157 |       /**
158 |        * 默认点击事件
159 |        * @param obj
160 |        */
161 |       function markerClick() {
162 |         getMap().panTo(this.point);
163 |       }
164 | 
165 |       /**
166 |        * 向地图添加兴趣点同时添加点击事件
167 |        * @param markers
168 |        * @param onClick
169 |        * @returns {*}
170 |        */
171 |       function drawMarkersAndSetOnclick(markers, onClick) {
172 |         var _markers = [],//待添加的兴趣点列表
173 |           defer = $q.defer(),
174 |           point,//当前添加的坐标点
175 |           _length,//数组长度
176 |           _progress,//当前正在添加的点的索引
177 |           _onClick;//点击事件函数
178 |         if (onClick) {
179 |           _onClick = onClick;
180 |         } else {
181 |           _onClick = markerClick;
182 |         }
183 |         $timeout(function () {
184 |           //判断是否含有定位点
185 |           if (!markers) {
186 |             defer.reject('没有传入兴趣点');
187 |             return;
188 |           }
189 |           //传入了参数
190 |           if (!angular.isArray(markers)) {
191 |             //传入的不是array
192 |             if (markers.loc) {
193 |               _markers.push(markers);
194 |             } else {
195 |               defer.reject('获取不到loc对象信息');
196 |             }
197 |           } else {
198 |             if (markers[0].loc) {
199 |               _markers = markers;
200 |             } else {
201 |               defer.reject('获取不到loc对象信息');
202 |             }
203 |           }
204 |           _length = _markers.length - 1;
205 |           angular.forEach(_markers, function (obj, index) {
206 |             _progress = index;
207 |             if (angular.isObject(obj.loc)) {
208 |               point = new BMap.Point(obj.loc.lng, obj.loc.lat);
209 |             } else if (angular.isString(obj.loc)) {
210 |               point = new BMap.Point(obj.loc.split(',')[0], obj.loc.split(',')[1]);
211 |             } else {
212 |               _progress = '第' + index + '个兴趣点loc对象不存在或格式错误，只支持object和string';
213 |             }
214 |             var marker = new BMap.Marker(point);
215 |             marker.obj = obj;
216 |             marker.addEventListener('click', _onClick);
217 |             getMap().addOverlay(marker);
218 |             defer.notify(_progress);
219 |             if (index === _length) {
220 |               defer.resolve();
221 |             }
222 |           });
223 |         });
224 |         return defer.promise;
225 |       }
226 |     }
227 |   }
228 | 
229 |   /***
230 |    * 地图指令
231 |    */
232 |   mapDirective.$inject = ['angularBMap'];
233 |   function mapDirective(angularBMap) {
234 |     return {
235 |       restrict: 'EAC',
236 |       replace: true,
237 |       scope: true,
238 |       template: '<div id="bMap" style="height: 100%;"></div>',
239 |       link: mapLink,
240 |       controller: mapController
241 |     };
242 |     /**
243 |      * link
244 |      * @constructor
245 |      * @param scope
246 |      * @param element
247 |      * @param attr
248 |      * @param ctrl
249 |      */
250 |     function mapLink(scope, element, attr, ctrl) {
251 |       ctrl.initMap();
252 |       ctrl.geoLocationAndCenter().then(function (result) {
253 |         //定位成功
254 |         console.log(result);
255 |       }, function (err) {
256 |         //定位失败
257 |         console.info(err);
258 |       });
259 |       var markers = [
260 |         {loc: {lng: 121.496011, lat: 31.244085}},
261 |         {lod: '121.494215,31.243005'},
262 |         {loc: '121.493065,31.244981'},
263 |         {lod: '121.49691,31.239454'},
264 |         {loc: '121.502515,31.243622'}];
265 |       ctrl.drawMarkersAndSetOnclick(markers).then(function (result) {
266 |         console.log('兴趣点添加完成');
267 |       }, function (err) {
268 |         console.log(err);
269 |       }, function (progress) {
270 |         console.log(progress);
271 |       });
272 |     }
273 | 
274 |     /**
275 |      * controller
276 |      * @constructor
277 |      * @type {string[]}
278 |      */
279 |     function mapController() {
280 |       this.geoLocation = angularBMap.geoLocation;//定位
281 |       this.initMap = angularBMap.initMap;//初始化
282 |       this.geoLocationAndCenter = angularBMap.geoLocationAndCenter;//获取当前定位并移动到地图中心
283 |       this.drawMarkers = angularBMap.drawMarkers;//添加兴趣点
284 |       this.drawMarkersAndSetOnclick = angularBMap.drawMarkersAndSetOnclick;//添加兴趣点同时添加点击事件
285 |     }
286 |   }
287 | })(window, window.angular);


--------------------------------------------------------------------------------