使用 angular-ui google 地图如何重新加载新的地图数据或中心？

Question

我还没有找到关于 angular google 地图的教程，其中显示了如何重新加载地图数据或使用新数据重新居中地图。

我的控制器：

vm.territories = []; //this gets loaded with the polylines
vm.center = {
            latitude: 40.7450,
            longitude: -99.3965
        }

Html:

<ui-gmap-google-map center="vm.center" zoom="vm.zoomLevel">
            <ui-gmap-polygon ng-repeat="ct in vm.territories" path="ct.territoryData" stroke="ct.mapStroke" visible="vm.polygon.visible"
                             geodesic="vm.polygon.geodesic" fill="ct.mapFill" editable="vm.polygon.editable">
            </ui-gmap-polygon>
        </ui-gmap-google-map>

所以问题是，如果我更改 vm.center 值或想要 add/remove/change vm.territories 在地图已经加载了该数据之后，我该如何重新加载它事实？我希望我可以将数据绑定到 ui 并即时更改它，但不确定是否可行。

Answer 1

如您在此 example 中所见，您可以简单地将中心值绑定到输入字段，或在其他控制器功能中使用它。

如果您像这样向控制器添加功能：

$scope.setCenter = function(lat, lng)
{
    $scope.map.center = {latitude: lat, longitude: lng };
}

并通过如下按钮调用此函数：

<button ng-click="setCenter(20, 30)">Set Center</button>

您会注意到地图如何以新值为中心。

如果您稍微扩展示例，您会发现这同样适用于多边形。

$scope.addPoint = function(lat, lng){
   $scope.polygons[0].path.push({latitude: lat, longitude: lng});
}

和按钮：

<button ng-click="addPoint(20, 30)">AddPoint</button>

使用 angular-ui google 地图如何重新加载新的地图数据或中心？

With angular-ui google maps how do you re-load new map data or center?

angular-ui

angular-google-maps