angularjs對百度地圖進行的指令封裝，github地址
主要由於angularjs使用百度地圖不是很方便，我就對它進行了一次小小的封裝，主要實現的內容如下：
拓展百度地圖方法，增加map的快速添加marker和點擊事件綁定的方法
addMarker(marker|BMap.Overlay,onMarkerClick | 點擊事件function);
通過指令綁定地圖事件，方式如下，包含全部地圖事件，這里只簡單寫兩個
map-event="{'map-click': 'onMapClick($event, $params)', 'map-loaded': 'onMapLoaded($event, $params)'}"
通過ui-baidu-map-info-window 指令創建信息窗體，並將窗體內部當作angularjs模版綁定到當前scope中
指令：ui-baidu-map-info-window
配置：info-window-event="{'close' : 'onInfoWindowClose($event, $params)','clickclose' : 'onInfoWindowClickClose($event, $params)'}"綁定百度InfoWindow基本事件
由於本人比較懶，下面摘抄於本人github，具體信息請到 項目github地址 查看
在命令行中執行以下命令
npm install
bower install
在瀏覽器中查看demo.html
修改源碼后編譯
源碼在src目錄下angularjs-baidu-maps.js，可在修改源碼后運行如下命令，在dist目錄生成angularjs-baidu-maps.min.js
grunt uglify
使用方式
詳細具體使用方式請參考 demo.html demo.js demo.css中內容
js引入
<script src="bower_components/angular/angular.js"></script> <script src="dist/angularjs-baidu-maps.min.js"></script>
基本配置
js中對百度地圖配置，通過一個對象mapOpts
angular.module('app', ['ls.bmap']) .controller('DemoCtrl', ['$scope', function ($scope) { $scope.mapOpts = { apiKey: '替換成你的key', center: {longitude: 121.595871,latitude: 31.187017}, zoom: 17, enableScrollWheelZoom: true, enableMapClick: false, onMapLoadFild: function () { //百度地圖加載失敗 } }; }]);
說明：
- mapOpts 百度地圖配置對象，名稱與html中map-options="mapOpts"一致
- apiKey 百度地圖控制台申請的key，百度地圖KEY申請
- center 初始化地圖中心點
- zoom 初始化地圖縮放級別
- enableScrollWheelZoom 是否允許鼠標控制地圖縮放
- enableScrollWheelZoom 是否允許地圖默認點擊事件(true表示基本標注可以點擊)
- onMapLoadFild 當地圖加載失敗回調
html模版中，配置如下
<div id="map" style="height:500px;" ui-baidu-map="myMap" map-event="{'map-click': 'onMapClick($event, $params)', 'map-loaded': 'onMapLoaded($event, $params)'}" map-options="mapOpts"> </div>
說明：
- myMap是Controller中百度地圖的引用，就是BMap.Map對象，我們可以使用百度地圖提供的方法操作它。myMap可以換成任何值，這里只需要與上面controller中名稱一致即可
- map-event指令中是描述百度地圖的各種事件(地圖點擊、地圖加載完成等等，可以到官方去查地圖參考，配置方式相同，在事件前加'map-'，參數都是($event,$params)，$event包含地圖事件的信息，$params是這個事件的參數列表(數組)
- map-options就是我們配置百度地圖的對象名稱，可以修改為任何值，與controller中保持一致
信息窗體配置
controller中配置信息窗體回調事件
angular.module('app', ['ls.bmap']) .controller('DemoCtrl', ['$scope', function ($scope) { // ... 省略其他配置 $scope.onInfoWindowClick = function (marker) { // 信息窗體內部，按鈕點擊事件，與angularjs事件綁定方式相同 }; $scope.onInfoWindowClickClose = function($event, $params) { //點擊信息窗體關閉按鈕 回調，右上角百度地圖關閉信息窗體點擊時出發。 }; $scope.onInfoWindowClose = function($event, $params) { //信息窗體關閉 回調，信息窗體關閉時觸發 }; }]);
html模版中信息窗體配置(示例)，實際使用中，只需要把需要當作信息窗體的html段落加上ui-baidu-map-info-window指令即可
<div ui-baidu-map-info-window="myInfoWindow" info-window-event="{'close' : 'onInfoWindowClose($event, $params)','clickclose' : 'onInfoWindowClickClose($event, $params)'}"> <div class="m-b-sm">標注</div> <form role="form"> <div class="form-group"> <label for="lat">Lat:</label> <input id="lat" ng-model="currentMarker.point.lat" class="form-control input-sm w-sm m-l-lg"> </div> <div class="form-group"> <label for="lng">Lng:</label> <input id="lng" ng-model="currentMarker.point.lng" class="form-control input-sm w-sm m-l-lg"> </div> <a class="btn btn-success btn-sm m-l-lg m-b-sm" ng-click="onInfoWindowClick(currentMarker)">點我試試</a> </form> </div>
說明：
- ui-baidu-map-info-window="myInfoWindow"配置controller中操作InfoWindow的引用名稱，可以替換為任何值
- info-window-event配置方式與地圖事件相同，不同之處在於這里不需要加前綴
- ui-baidu-map-info-window指令所包含的所有內容都被當作InfoWindow的內容