AngularJS - Leaflet - "center" 属性 未在主范围内定义

Question

我已正确设置 leaflet.js，地图在我的应用程序中按预期呈现。但是，我不断收到以下错误消息：The "center" property is not defined in the main scope。我做错了什么？

在我看来：

<leaflet markers="markers" center="osloCenter"></leaflet>

在我的控制器中：

function MapCtrl($scope) {
    angular.extend($scope, {
          osloCenter: {
                lat: 59.91,
                lng: 10.75,
                zoom: 12
        },
        markers: {
            osloMarker: {
                lat: 59.91,
                lng: 10.75,
                focus: true,
                draggable: false
            }
        defaults: {
            scrollWheelZoom: false
        }
    });
};

我也试过以下方法：

       scope.osloCenter  = {
            lat : 59.91,
            lng : 10.75,
            zoom : 12
        };

        $scope.osloMarker = {
            lat: 59.91,
            lng: 10.75,
            focus: true,
            draggable: false
        };

Answer 1

对象需要在 $rootScope 的应用程序级别（即 app.js）初始化：

 function runBlock($rootScope) {
   angular.extend($rootScope, {
     center: {},
     markers: {},
   });
 }

然后可以在控制器中设置所需的值：

var centerLat = parseFloat($stateParams.lat);
var centerLng = parseFloat($stateParams.lon);

$scope.center = {
  lat: centerLat,
  lng: centerLng,
  zoom: 15
};    

$scope.markers = {
  marker: {
    lat: centerLat,
    lng: centerLng,
    focus: true,
    draggable: false
  }
};