Question

我已经制定了在我的网站上加载google地图API的指令：http://plnkr.co/edit/3009kInkBmiF9ksB3eg9?p=catalogue

我的问题是：如何将实例化地图然后在不同的视图上添加一些点击侦听器的最佳方法是什么？

我正在使用ngView指令加载辅助视图：

'use strict';

var climbingApp = angular.module('climbingApp', ['ngRoute', 'maps'], 
    function( $routeProvider ){

        $routeProvider.when('/', {
            controller: 'Main'
        });

        $routeProvider.when ('/newSector', {
            templateUrl: 'app/templates/newSector.html',
            controller: 'addSector'
        });
    }
);

在newSector控制器中，我使用服务添加监听器：

climbingApp.factory('Markers', function( $rootScope ){
    return {
        addListener: function( mapInstance, callback ) {
            google.maps.event.addListener(
                mapInstance,
                'click',
                 function( e ) {
                    var marker = new google.maps.Marker({
                        position: e.latLng,
                        map: mapInstance
                    });
                    $rootScope.$apply( function(){ callback( e ); });
                }
            );
        }
    }
});

但是这样做我无法从主控制器中删除监听器，因为我无法引用映射实例。有什么线索我应该怎么做？

Answer 1

我是ng-map, google maps angularjs directive的创建者，名为ng-map。这不需要任何Javascript编码来实现简单的功能。

对于您的情况，使用该指令，您只需将“点击后”属性添加到map代码。

<map zoom="11" center="[40.74, -74.18]" on-click="myfunc()">
</map>`

更多细节可以在ng-map找到。

从指令AngularJs实例化地图

1 个答案: