使用控制器将标记添加到指令中初始化的谷歌地图中

Question

我有一个谷歌地图，其中的选项在指令中实例化：

.directive('uiMap',
    ['uiMapConfig', '$parse', function (uiMapConfig, $parse) {
        var mapEvents = 'bounds_changed center_changed click dblclick drag dragend ' +
            'dragstart heading_changed idle maptypeid_changed mousemove mouseout ' +
            'mouseover projection_changed resize rightclick tilesloaded tilt_changed ' +
            'zoom_changed';
        var options = uiMapConfig || {};
        return {
            restrict: 'A',
            //doesn't work as E for unknown reason
            link: function (scope, elm, attrs) {
                var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions));
                var map = new window.google.maps.Map(elm[0], opts);
                var model = $parse(attrs.uiMap);
                //Set scope variable for the map
                model.assign(scope, map);
                bindMapEvents(scope, mapEvents, map, elm);
            }
        };
    }]);

由于这个div，地图显示正确：

<section id="map">
    <div ui-map="myMap" ui-options="ctrl.mapOptions" class="google-map"></div>
</section>

我正在尝试做的是使用控制器单击按钮后在此地图上添加一个标记：

this.findAddress = function() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var marker = new google.maps.Marker({
        position: myLatlng,
        title:"Hello World!"
    });
    marker.setMap(map);
}

问题是"地图"在控制器中未定义，我不知道如何访问地图的实例。

谢谢你的帮助。

Answer 1

从uiMap指令中，您可以在通过$emit创建映射后通知控制器：

 scope.$emit('mapReady', map);

在控制器中

$scope.map = null;
$scope.$on('mapReady', function (event, map) {
    $scope.map = map; 
});

和

 $scope.findAddress = function () {
      //create a marker here...      
      marker.setMap($scope.map);
 }

例

angular.module('myApp', [])
    .directive('uiMap',
    ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs) {
                var opts = scope.$eval(attrs.uiOptions);
                var map = new window.google.maps.Map(elm[0], opts);
                scope.$emit('mapReady', map);
            }
        };
    }])
    .controller('MapCtrl', [
        '$scope', function ($scope) {
            $scope.map = null;
            $scope.mapOptions = {
                zoom: 12,
                center: new google.maps.LatLng(-33.870501, 151.206704),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            $scope.isMapReady = function(){
                return $scope.map != null;
            }
            $scope.$on('mapReady', function (event, map) {
                $scope.map = map; 
            });
            $scope.findAddress = function () {
                var myLatlng = new google.maps.LatLng(-33.870501, 151.206704);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    title: "Hello World!"
                });
                marker.setMap($scope.map);
            }
        }]);

.google-map {
            width: 640px;
            height: 320px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="script.js"></script>
  <div ng-app="myApp">
        <div ng-controller="MapCtrl">
           
            <button ng-click="findAddress()"  ng-disabled="!isMapReady()">Find address</button>
            <section id="map">
                <div ui-map="myMap" ui-options="{{mapOptions}}" class="google-map"></div>
            </section>
        </div>
</div>