angularjs - Angular Mapbox vs Angular Leaflet Mapbox vs Angular 谷歌地图

Question

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

Answer 1

为什么不编写您自己的简单指令，将 map 实例传递到您的 Controller 范围，以便您可以充分利用 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);
      }
    };
  }
]);

现在在你的 Controller 中使用它:

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

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

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