Question

我正在构建一个AngularJS应用程序，并对$ stateParams服务感到困惑。我正在尝试分配Google地图中心＆＃39;变量作为URL中的lat和lon值。

这是我的.config：

  .config(function ($stateProvider) {
      $stateProvider.state('location', {
          url: '/:lat/:lon',
          templateUrl: 'index.html',
          controller: 'MapsCtrl',
          resolve: {
              resolveMap: function (MapService, $stateParams) {
                  return MapService.getData($stateParams.lat, $stateParams.lon, $stateParams.radius);
              }
          }
      });

  })

这是我的控制器的开始，直到我定义中心的位置：

.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams",
  function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams, $http) {
      $log.currentLevel = $log.LEVELS.debug;
      var center = { latitude: $stateParams.lat, longitude: $stateParams.lon };

我收到错误：＆＃39; angular-google-maps：无法找到有效的中心属性＆＃39;。

这是一个JS小提琴，但它不显示任何输出（可能是因为上面的错误）：https://jsfiddle.net/8mtge09w/

Answer 1

问题是因为您在设置之前尝试绑定变量。您需要确保所有google-map指令参数首先有效。您可以使用ui-gmap-google-map包装ng-if指令元素，以确保您的地图属性已准备就绪。

我相信你可以使用

ng-if="map.center !== undefined"

可以肯定。基本上，不要渲染元素，直到绑定了有效的属性。您还可以设置默认值并避免使用ng-if。

有关详细信息，请参阅this github issue。

Answer 2

当您更改视图时，Yo应该通过纬度和经度。

$tate.go(stateName, {}, {latitude: value, longitude: value})

除此之外，当您定义状态时，您应该使用默认值设置参数。

.state(
     .....
     params: {
          latitude: defaultValue,
          longitude: defaultValue
     }
 )

使用$ stateParams

2 个答案: