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的内容