Angular Mapbox vs Angular Leaflet Mapbox vs Angular google 地图

Question

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

Answer 1

为什么不编写自己的简单指令，将地图实例传递到控制器范围，以便充分利用 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

Angular Mapbox vs Angular Leaflet Mapbox vs Angular google 地图

Angular Mapbox vs Angular Leaflet Mapbox vs Angular google maps

google-maps-api-3

angularjs

leaflet

mapbox

angular-leaflet-directive