(腾讯地图) angular ui for qq map

angular, angularui, map, qq
bower install angular-ui-map-qq


qq map for angular ui GitHub version Bower version


qq map for angular ui demo and documents:

Get started

You can get it from Bower

bower install angular-ui-map-qq

This will copy the UI.Map.qq files into a bower_components folder, along with its dependencies. Load the script files in your application:

<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=""></script>



Make sure to listen to the callback parameter when loading the qq Maps API ! The API must be fully loaded before this module ! Here we name this callback init. To load your angular app after the qq Maps API you can start it with angular.bootstrap.

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


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

myAppModule.config(['uiMapLoadParamsProvider', function (uiMapLoadParamsProvider) {
                              v: '2.0',

并在html顶层dom加上 ui-map-async-load

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

Add the UI.Map.qq module as a dependency to your application module :

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

Finally, add the directive to your html:

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

Note that myMap will be a qq.maps.Map class, and mapOptions a qq.maps.MapOptions object (see below).

To see something it's better to add some CSS, like

.map-canvas { height: 400px; }


qq.maps.MapOptions object can be passed through the main directive attributeui-map.

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


UI.Event allows you to specify custom behavior over user events. You just need to prefix the official event by map- to bind a callback to it.

For example, the click or idle event of the qq.maps.Map class can be used through the UI.Event object keys map-click and 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())' }"


本项目使用Yeoman generator生成的,过程如下:

  • Prepare: npm install -g yo grunt-cli bower
  • Install: npm install -g generator-angular
  • Run: yo angular
  • Perform a build: grunt
  • Run local server: grunt serve ## Testing

We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g grunt-cli
npm install && bower install

The karma task will try to open Firefox and Chrome as browser in which to run the tests. Make sure this is available or change the configuration in test\karma.conf.js

Grunt Serve

We have one task to serve them all !

grunt serve

It's equal to run separately:

  • grunt connect:server : giving you a development server at

  • grunt karma:server : giving you a Karma server to run tests (at http://localhost:9876/ by default). You can force a test on this server with grunt karma:unit:run.

  • grunt watch : will automatically test your code and build your demo. You can demo generation with grunt build:gh-pages.