Welcome to angularjs qq map.

预览angularjs展现qq map实例

Marker

Lat: , Lng: Set Position

地图异步加载中...

map zoom: {{zoomMessage}}

安装angular-ui-map-qq插件

可以使用bower工具安装

    bower install angular-ui-map-qq

这样会在bower的依赖文件夹（如bower_components）里添加angular-ui-map-qq插件与其依赖插件的文件，然后在你html中加入script标签如下

<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-qq/ui-map.js"></script>

如果没有使用异步加载地图，还需加入地图链接

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

添加为angularjs依赖

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

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

最后则可以在你的html使用ui.map的directive

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

异步加载地图

方法一

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

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

方法二

使用angularjs的config进行配置异步加载地图的参数，在config方法里加入provider依赖uiMapLoadParamsProvider，并设置加载地图链接所需参数：

myAppModule.config(['uiMapLoadParamsProvider', function (uiMapLoadParamsProvider) {
                  uiMapLoadParamsProvider.setParams({
                      v: '2.0', // 版本号
                      key:'ZYZBZ-WCCHU-ETAVP-4UZUB-RGLDJ-XXXX' // 你地图供应商那里注册的key
                  });
            }])

并在html顶层dom加上ui-map-async-load，使其包含ui-map

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

详细使用details

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

这里的myMap将是MapCtrl controller的$scope里的一个变量，它是qq.maps.Map class的一个实例对象。 mapOptions则是设置map配置选项的对象变量，它是一个qq.maps.MapOptions object。

还需要设置地图的大小

.map-canvas { height: 400px; }

Options

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

myAppModule.controller('MapCtrl', ['$scope', function ($scope) {
    $scope.mapOptions = {
      center: new qq.maps.LatLng(lat, lng),
      // ui map config
      uiMapCache: true // (mobile app适用)是否使用缓存来缓存此map dom，而不是每次链接跳转来都重新创建
    };
  }]);

ngCenter ngZoom

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

myAppModule.controller('MapCtrl', ['$scope', function ($scope) {
    $scope.mapOptions = {
      // 地图配置
      mapTypeId: qq.maps.MapTypeId.ROADMAP,
      // angular自定义地图配置
      ngCenter: {
        lat: 33,
        lng: 120
      },
      ngZoom: 5
    };
  }]);

UI.Event

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

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

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