Question

我在我的应用程序中使用Google-maps-angular指令，我正在尝试将该指令包装在我自己的指令中。如果我在控制器中定义地图对象，它工作正常。但是当我在链接函数中定义地图对象时，它似乎没有获取地图对象。

我尝试在指令的控制器中定义地图对象，但是也没有加载地图。在加载html之前，范围似乎没有初始化，这解释了为什么地图不会加载，但我无法弄清楚为什么会这样。有没有其他方法可以在指令中定义地图对象而不是外部控制器？

另外，当查看google-map的范围内（使用angular.element（“google-map＆gt;”）。scope（））时，它会显示要定义的中心，所以我不确定为什么没有加载地图。

var app = angular.module('myApp',[
        'google-maps',
    ])

app.directive('myDir', function($http) {
    return {
        restrict: 'AE',
        template: '<google-map center="map.center" zoom="13" draggable="true" pan= "1" control="map.control"></google-map>',
        link: function(scope, elem, attrs) {
            scope.map = {
                center: {
                    latitude: 40.35,
                    longitude: -74.6702
                },
                control:{}
            }
        },
    };
});

Answer 1

我知道你不是在询问ngMap，但我发现这种方式比http://angular-google-maps.org/

容易得多

以下是plunker，http://plnkr.co/edit/ZwUARi7OC2vUnJS6UdBD?p=preview

这是你的指令

var app = angular.module('myApp', ['ngMap']);

app.directive('myDir', function() {
  return {
    restrict: 'AE',
    template: '<map center="{{mapOptions.center}}" zoom="13" draggable="true" pan="1"></map>',
    link: function(scope, elem, attrs) {
    },
  };
});

应该不那么难。顺便说一句，我是ngMap

的创造者

在加载指令模板之前，指令的范围未初始化，导致未加载Google Map

1 个答案: