ui-map-baidu by anypossiblew

Angularjs ui for baidu map

Angularjs ui module for baidu map

Install

使用下面命令安装并保持依赖到bower.json文件

bower install angular-ui-map-baidu --save

Usage

添加依赖的javascript文件到你的页面

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-utils/modules/event/event.js "></script>
<script type="text/javascript" src="bower_components/angular-ui-map-baidu/ui-map.js"></script>

不使用异步加载地图，还需加入地图链接

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"></script>

在你的angular module中加入ui.map依赖，如下

var myAppModule = angular.module('myAppModule', ['ui.map']);

在你需要添加地图的地方加入ui-map directive

<section id="map" ng-controller="MapCtrl" >
    <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section>

这里的myMap将是MapCtrl controller的$scope里的一个变量，它是BMap.Map class的一个实例对象。 mapOptions则是设置map配置选项的对象变量，它是一个BMap.MapOptions object，其中包含自定义选项。

注意：ui-map的dom要设置width height属性，如设置css .map-canvas {width: 100%; height: 500px;}

异步加载Map

方法1

加载baidu地图时添加异步加载地图的监听回调函数如下面代码，函数命名为init，在init函数里加载angular app。关于angular.bootstrap参见angular.bootstrap

function init() {
    angular.bootstrap(document.getElementById("map"), ['myAppModule']);
}

方法2

如下在module config中加入加载地图链接所需要的参数

myAppModule.config(['uiMapLoadParamsProvider', function (uiMapLoadParamsProvider) {
    uiMapLoadParamsProvider.setParams({
        v: '2.0', // 版本号
        ak:'xxxx' // 你的地图密钥
    });
}]);

并在app的顶层dom中加上ui-map-async-load directive，使其包含ui-map

<body ng-controller="MapCtrl" ui-map-async-load>
    <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</body>

缓存Map

在使用angularjs的ui router时，经常需要在不同router之间切换，但不希望每次切换都重新创建地图对象。通常使用的方法是在controller destroy时保存地图各项状态参数（如level、center等）和地图覆盖物的参数（如marker的point位置），在下次创建地图时重新绘制；此‘ui-map’directive提供一种简便的方式，在controller destroy时保存整个地图对象和对于的dom，在下次创建地图时直接使用缓存的地图对象:

在‘ui-map’directive上添加ui-map-cache属性，并设置值为缓存地图对象的名称（此名称应该是全局唯一的）。

<body ng-controller="MapCtrl" ui-map-async-load>
    <div ui-map="myMap" ui-map-cache="mapCacheName" ui-options="mapOptions" class="map-canvas"></div>
    </body>

Options

在controller里的$scope上设置BMap.MapOptions object可以通过ui-map directive的ui-options属性传给地图

myAppModule.controller('MapCtrl', ['$scope', function ($scope) {
    $scope.mapOptions = {
        mapType: BMap.MapType.BMAP_PERSPECTIVE_MAP
    };
}]);

ngCenter ngZoom

使用ngCenter属性设置地图初始化的中心坐标点，使用ngZoom属性设置地图初始化zoom

$scope.mapOptions = {
    mapType: BMap.MapType.BMAP_PERSPECTIVE_MAP,
    // ui map config
    ngCenter: {
        lat: 33,
        lng: 120
    },
    ngZoom: 5
};

UI.Event

使用UI.Event插件可以自定义用户操作事件的响应处理逻辑，只需要在原事件名前加上前缀'map-'以绑定响应事件。例如地图Map的'click'或'moveend'事件可以使用UI.Event对象的key map-click或map-moveend来绑定事件，如下代码

<div  ui-map="myMap"ui-options="mapOptions" class="map-canvas"
    ui-event="{'map-click': 'addMarker($event, $params)', 'map-moveend': 'setZoomMessage(myMap.getZoom())' }">
</div>

如需添加复杂逻辑，可以通过$scope.myMap获取地图对象后，对其进行复杂操作