Блог

Я использую библиотеку angular-google-maps в своем проекте. Я использовал директиву для загрузки пользовательского меню Google Maps. Цель состоит в том, чтобы, очевидно, повторно использовать директиву. В меню есть пара кнопок, которые при нажатии должны выполнять определенную функцию. Я все еще пытаюсь разобраться в том, как это сделать, так что вот моя проблема:

Я хотел бы переместить карту в исходное положение при нажатии кнопки «Домой». Обычно это делается просто с помощью ng-click, и функция помещается в область действия контроллера. С директивой я в замешательстве. Где я должен разместить функцию «home ()»? Директива? Контроллер директив? Контроллер? Надеюсь, это имеет какой-то смысл ?!?!

HTML:

 <div class="map_canvas">
                    <google-map center="map.center" zoom="map.zoom" draggable="true">

                        <marker ng-repeat="m in map.markers" coords="m" icon="m.icon" click="onMarkerClicked(m)">
                            <marker-label content="m.name" anchor="50 0" class="marker-labels"/>
                            <window ng-cloak  coords="map.center" isIconVisibleOnClick="false" options="map.infowindows.options">
                                    <p>This is an info window at {{ m.latitude | number:4 }}, {{ m.longitude | number:4 }}!</p>
                                    <p class="muted">My marker will stay open when the window is popped up!</p>
                            </window>

                        </marker>


                        <map-custom-control position="google.maps.ControlPosition.TOP_CENTER" control-template="../templates/gmaps/main_menu.html" control-click=""></map-custom-control>


                    </google-map>
                </div>
  

Шаблон:

 <div  class="gmaps-menu">

    <div class="gmaps-row">
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_020_home.png" ng-click="home()"></button>
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_349_fullscreen.png"></button>
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_096_vector_path_polygon.png"></button>
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_030_pencil.png"></button>
    </div>

</div>
  

Директива:

 AppDirectives.directive('mapCustomControl', ['$log', '$timeout', '$http', '$templateCache', 'google', 'GMapsLib' ,function ($log, $timeout, $http, $templateCache, google,GMapsLib) {



    return {
        restrict: 'E',
        replace: true,
        require: '^googleMap',
        link: function(scope,element,attr,mapCtrl){

        if (!angular.isDefined(attr.controlTemplate)) {
            $log.error('map-custom-control: could not find a valid control-template property!');
            return;
        }

        var templateUrl = attr.controlTemplate;

        var position = google.maps.ControlPosition.TOP_CENTER;
        if (angular.isDefined(attr.position)) {
            var EVAL_IS_OK_WE_CONTROL_THE_INPUT = eval;
            position = EVAL_IS_OK_WE_CONTROL_THE_INPUT(attr.position);
        }



        $timeout(function() {

            var map = mapCtrl.getMap();

            var controlDiv = document.createElement('div');
            controlDiv.style.padding = '5px';
            controlDiv.style.width = 'auto';
            controlDiv.marginLeft = 'auto';
            controlDiv.marginRight = 'auto';
            $http.get(templateUrl, {cache: $templateCache})
                .success(function(html) {
                    controlDiv.innerHTML = html;
                })
                .then(function (/*response*/) {
                    map.controls[position].push(controlDiv);
                    if (angular.isDefined(attr.controlClick)) {
                        google.maps.event.addDomListener(controlDiv, 'click', function() {
                            scope.$apply(attr.controlClick);
                        });
                    }
                }
            );
        });
    }
    };
  

}]);

Вы можете передать функцию области видимости, которая должна выполняться на контроллере:

HTML

 <div ng-app="app" ng-controller="sampleCtrl">
    <maps-custom-control click-handler="alertMe()"></maps-custom-control>
</div>
  

JS

var app = angular.module(‘app’, []);

 app.directive('mapsCustomControl', function() {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            clickHandler: 'amp;'
        },
        template: '<div style="width: 100px; height:100px; background-color: red;" ng-click="clickHandler()"></div>'
    };
});


app.controller('sampleCtrl', function ($scope) {
    $scope.alertMe = function () {
        window.alert('Refresh gMaps control');
    };
});
  

Поскольку мы передаем функцию AlertMe, это функция, которая будет выполнена, я надеюсь, это имеет смысл?

Скрипка

Небольшое замечание по вашему коду, было бы лучше, если бы вы получили шаблон следующим образом:

 app.directive('..', function() {
   return {
      template: '<div ng-include="getTemplate()"></div>',
      link: function(scope, element, attr) {
         scope.getTemplate = function() {
            return this.attr.controlTemplate;
         }
      }
   };
});
  

Таким образом, вам не нужно выполнять какие-либо странные вызовы ajax. Просто добавьте всю разметку в свой шаблон и включите ее. не усложняйте это 🙂