角谷歌地图更新模型

Question

如何更新模型以加载新的标记数据集？

<ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds" refresh="map.refresh">
<ui-gmap-markers
    models="dataset"
    coords="'self'"
    icon="'icon'"
    doCluster='10'
    click="onClick"
    >
        <ui-gmap-windows show="show">
            <div ng-non-bindable>
                <h3 class="gray3-text fz13 mbottom0">{{title}}</h3>
            </div>
        </ui-gmap-windows>
</ui-gmap-markers>

我正在从 ui-gmap-google-map 指令外部更改数据集，就像这样

<p ng-click="changeDataset('allUsers')" class="cursor-pointer">
<p ng-click="changeDataset('allQuotations')" class="cursor-pointer">

函数是这样的：

scope.changeDataset = function(){
    switch (dataset) {
         case 'allResellers':
             scope.dataset = scope.allResellers;
             break;
          case 'allQuotations':
              scope.dataset = scope.allQuotations;
              break;

           case 'allUsers':
              scope.dataset = scope.allUsers;
              break;

           case 'allMarkers':
              scope.dataset = scope.allMarkers;
              break;
       }
 };

我的 scope.dataset 发生了变化，但它不会更新地图中的标记。

PS：modelsbyref="false" 不起作用。

将 control="markerControl" 添加到 ui-gmap-google-map 有效，但必须使用此解决方法：

angular.element(document.getElementsByClassName('angular-google-map')).scope().markerControl.updateModels(newDataset);


<ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds">
<ui-gmap-markers
    models="dataset"
    coords="'self'"
    icon="'icon'"
    doCluster='10'
    click="onClick"
    control="markerControl"
    >
        <ui-gmap-windows show="show">
            <div ng-non-bindable>
                <h3 class="gray3-text fz13 mbottom0">{{title}}</h3>
            </div>
        </ui-gmap-windows>
</ui-gmap-markers>

Answer 1

由于changeDataset 函数需要数据集名称，因此经过以下更改：

$scope.changeDataset = function(dataset) {
        switch (dataset) {
            case 'allResellers':
                $scope.dataset = $scope.allResellers;
                break;
            case 'allQuotations':
                $scope.dataset = $scope.allQuotations;
                break;

            case 'allUsers':
                $scope.dataset = $scope.allUsers;
                break;

            case 'allMarkers':
                $scope.dataset = $scope.allMarkers;
                break;
        }
    };  

地图模型正在正确更新。

工作示例

angular.module('appMaps', ['uiGmapgoogle-maps'])
    .controller('mapCtrl', function($scope, uiGmapGoogleMapApi) {

        $scope.dataset = [
            { id: 1, title: "Brisbane", latitude: -33.867396, longitude: 151.206854 },
            { id: 2, title: "Sydney", latitude: -27.46758, longitude: 153.027892 },
            { id: 3, title: "Perth", latitude: -31.953159, longitude: 115.849915 }
        ];

        $scope.allResellers = [];
        $scope.allQuotations = [
            { id: 1, title: "Q1", latitude: -31.867396, longitude: 144.206854 },
            { id: 2, title: "Q2", latitude: -28.46758, longitude: 152.027892 }
        ];
        $scope.allUsers = [
            { id: 1, title: "User1", latitude: -36.867396, longitude: 145.206854 },
            { id: 2, title: "User2", latitude: -33.46758, longitude: 142.027892 },
        ];
        $scope.allMarkers = [];



        uiGmapGoogleMapApi.then(function(maps) {
            $scope.map = {
                center: { latitude: -30, longitude: 135.0 },
                zoom: 4,
                control: {},
                markerEvents: {
                    click: function(marker) {
                    }
                },
                options: $scope.mapOptions
            };
        });

        $scope.mapOptions = {};


        $scope.changeDataset = function(dataset) {
            switch (dataset) {
                case 'allResellers':
                    $scope.dataset = $scope.allResellers;
                    break;
                case 'allQuotations':
                    $scope.dataset = $scope.allQuotations;
                    break;

                case 'allUsers':
                    $scope.dataset = $scope.allUsers;
                    break;

                case 'allMarkers':
                    $scope.dataset = $scope.allMarkers;
                    break;
            }
        };




    });

.angular-google-map-container { height: 480px; }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script>

<div ng-app="appMaps" ng-controller="mapCtrl">


    <p ng-click="changeDataset('allUsers')" class="cursor-pointer" >Display users</p>
    <p ng-click="changeDataset('allQuotations')" class="cursor-pointer" >Display quotations</p><br/>

    <ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds" refresh="map.refresh">
        <ui-gmap-markers models="dataset" coords="'self'" icon="'icon'" doCluster='10' click="onClick">
            <ui-gmap-windows show="show">
                <div ng-non-bindable>
                    <h3 class="gray3-text fz13 mbottom0">{{title}}</h3>
                </div>
            </ui-gmap-windows>
        </ui-gmap-markers>
</div>

Answer 2

与这个问题angular-google-maps updating marker model中的问题相同

似乎每当我们更新标记 angularjs 都不会立即更新它。将新标记推送到数组后，只需调用 $scope.$digest()。

还要检查 $scope.$apply() 函数，它会自动调用 $scope.$digest()。 请参阅本教程，其中详细说明： tutorial showing $scope.$digest(), $scope.$apply, $scope.watch

上面的教程写的：

您可能会遇到一些极端情况，AngularJS 不会为您调用 $digest() 函数。您通常会通过注意到数据绑定不会更新显示的值来检测到这一点。在这种情况下，调用 $scope.$digest() 它应该可以工作。或者，您也许可以使用 $scope.$apply()