3

我很困惑使用哪一个。我目前正在使用 angular mapbox --> http://inkblot.io/angular-mapbox，但是文档没有解释我想要的某些功能，例如如何将 API 调用中的标记与线条连接以及如何使地图居中生成时在标记上。Angular Mapbox 非常适合使用 $scope 来呈现数据，但我正在考虑切换到其他东西以拥有这些其他功能。有谁知道一个简单的解决方案，使用带有 $scope 的 ngrepeat 渲染数据，将这些标记与线条连接起来，并在生成这些标记时使地图居中？

4

1 回答 1

8

为什么不编写您自己的简单指令，将地图实例传递给您的控制器范围，以便您可以充分利用 mapbox js api？Angular 可用的指令，例如您链接的指令，angular-leaflet-directive 和 angular-google-maps 非常臃肿和复杂，以至于您最终会从一个缓慢的应用程序开始。如果你只显示几个标记和折线，那简直是矫枉过正，会让你发疯似的陷入困境。此外，在大多数情况下，这些文档记录不充分，更新且大多不完整（到目前为止还没有完整的 api 覆盖），我认为这是一个糟糕的选择。（非常尊重这些项目的开发者）

可以这么简单，模板：

<mapbox callback="callback"></mapbox>

对于指令：

angular.module('app').directive('mapbox', [
  function () {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        callback: "="
      },
      template: '<div></div>',
      link: function (scope, element, attributes) {
        L.mapbox.accessToken = 'YOUR PUBLIC MAPBOX KEY';
        var map = L.mapbox.map(element[0], 'YOUR MAP PROJECT ID');
        scope.callback(map);
      }
    };
  }
]);

现在在您的控制器中使用它：

angular.module('app').controller('rootController', [
  '$scope',
  function ($scope) {
    $scope.callback = function (map) {
      map.setView([51.433333, 5.483333], 12);
    };
  }
]);

该指令初始化地图，将地图实例传递回您的控制器范围，然后您就可以开始做任何您喜欢的事情了。我在 Plunkr 上有一个工作示例，但 Mapbox 使示例键和映射无效。我有一个完整的工作示例，但它不使用 Mapbox，它使用 Leaflet，但原理保持不变，您可以在这里进行测试：http ://plnkr.co/edit/gax5NL7DX2PWmJXKP9YD?p=preview

找到了 mapbox 示例，请记住它不会加载图块，因为令牌已过期或已被删除：http ://plnkr.co/edit/OpVhUKLryW8rbEtJ8jgh?p=preview

于 2015-09-03T08:09:46.950 回答