使用控制器向指令中初始化的 Google 地图添加标记

Question

我有一个 Google 映射，其选项在指令中实例化：

.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);

}

问题是 "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>

使用控制器向指令中初始化的 Google 地图添加标记

Adding a marker using a controller to a Google Maps initialised in a directive

angularjs

google-maps

controller

directive