angular-google-maps更新标记模型

Question

我正在使用angular-google- map库，但是当我动态地向我的模型添加新标记时，我似乎无法获得要更新的地图。模型中的硬编码标记正确显示。

HTML

<ui-gmap-markers models="map.placeMarkers" coords="'self'" icon="'icon'" options="'options'" click="'onClicked'" modelsbyref="true"></ui-gmap-markers>

JS

$scope.map.placeMarkers = [
            {
                id: 1,
                latitude: 45,
                longitude: -74,
                options: {},
                title: 'Test 123'
            },
            {
                id: 2,
                latitude: 15,
                longitude: 30,
                options: {},
                title: 'Test 1234'
            }
        ];

然而，当我这样做时，上面的代码运行得很好：

var place = {
   id: 3,
   latitude: 455,
   longitude: -574,
   options: {},
   title: 'Test 1233455'
};

$scope.map.placeMarkers.push(place);

模型已更新，但地图未更新。我尝试过使用$scope.$apply()，但得到了一个错误，因为摘要周期已经在进行中了。

Answer 1

您需要在ui-gmap-markers指令中将modelsbyref设置为false

 <ui-gmap-markers models="places" coords="'self'" modelsbyref="false">  

   </ui-gmap-markers>

Answer 2

我也是一样。花了几个小时来寻找解决方案。

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

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

它是在上面的教程中编写的：

在某些特殊情况下，AngularJS不会为您调用$digest()函数。您通常会注意到数据绑定不会更新显示的值，从而检测到这一点。在这种情况下，调用$scope.$digest()就可以了。或者，您也可以使用$scope.$apply()