javascript - 使用 AngularJS 将 Google map (在指令中定义)居中

Question

我决定使用我的标记(我定义的)创建一个自定义 map ，并在标记之间添加搜索功能。我有一个 mymarkers.js 文件

var app = angular.module('myApp');
app.constant("myMarkers", [{
   lat='..',
   lng='..'
 },{
   lat='..',
   lng='..'
}]);

app.js 文件

var app = angular.module('myApp', []);
angular.module('myApp').controller("myController", ["$scope", "myMarkers",    function($scope, myMarkers){
    $scope.markers= myMarkers; 
    $scope.searchMarkers = function(arr,obj){..};
    $scope.centerMapOnMarker = function (marker){..} <--
    }]);    
app.directive('myMap', ["myMarkers", function(myMarkers) {
        // directive link function
        var link = function(scope, element, attrs) {
            var map, infoWindow;
            var markers = [];
            // map config
            var mapOptions = {
                center: new google.maps.LatLng(48.849005, 2.337674),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: true
            };

        // init the map
        function initMap() {..}    

        // place a marker
        function setMarker(map, position, title, content,link) {..}

        function returnMarker(){..}
        // show the map and place some markers
        initMap();

        for (var i = 0; i < 60; i++) {
            setMarker(map, new google.maps.LatLng(myMarkers[i].lat, myMarkers[i].lng), myMarkers[i].title, myMarkers[i].content, myMarkers[i].icon);
        }

    };

    return {
        restrict: 'A',
        template: '<div id="gmaps"></div>',
        replace: true,
        link: link
    };
}]);

和一个index.html

<div my-map=""></div>

<div class="myresearch">
            <input placeholder="Search a place" ng-model="search">
                <div ng-show="search.length">
                <p ng-repeat="marker in markers | filter: search"> 
                    <span ng-click="centerMapOnMarker(marker)"> <--
                    <img class="icon-search" ng-src="{{marker.icon}}" /> 
                    <label class="textr"> {{marker.title}} </label> </p>
                    </span>
                </div>
        </div>

当我点击 map 时，我想将 map 置于我的标记的中心。但我有一个问题，因为 map 是在指令中定义的，我无法访问它。当我尝试在我的 Controller 和 html(带有 <-- 箭头)中重新使用它时，我有一个明显的错误: map isn't Defined 所以我不知道如何执行此操作以及如何在我的 Controller 中重用我的指令中定义的 var map。

提前谢谢

Answer 1

一种可能的解决方案是使用 Angular 事件系统。

在此处查看已接受的答案 - How can I call a directive function from outside?

所以在你的 Controller 中你可以这样做

$scope.centerMapOnMarker = function (marker){
        $scope.$broadcast('center-on-marker', marker);
    }

在你的指令中:

scope.$on('center-on-marker', function (event, args) {
  //do you centering logic here by accessing marker from args param
});