从指令 AngujarJs 实例化映射

Instantiate map from directive AngujarJs

本文关键字：映射 实例化 AngujarJs 指令      更新时间：2023-09-26

我做了一个指令，在我的网站上加载谷歌地图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 ); });
                }
            );
        }
    }
});

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

我是ng-map的创建者，谷歌地图angularjs指令称为ng-map。这不需要任何Javascript编码来获得简单的功能。

对于您的情况，使用该指令，您只需将"点击"属性添加到map标签即可。

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

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

相关文章：