Angular Mapbox vs Angular Leaflet Mapbox vs Angular google maps

Question

我很困惑哪一个使用.我目前正在使用角度映射框 - > http://inkblot.io/angular-mapbox,但是文档没有解释我想要的某些功能,比如如何将API调用中的标记与线连接以及如何将地图置于中心在标记生成时.Angular Mapbox使用$ scope来渲染数据非常棒,但是我想切换到其他东西才能拥有其他功能.有没有人知道一个简单的解决方案,使用带有$ scope的ngrepeat渲染数据,用线条连接这些标记,并在生成这些标记时使地图居中？

Answer 1

为什么不编写自己的简单指令将map实例传递给控制器​​范围,这样你就可以充分利用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示例,请记住它不会加载tile,因为令牌已过期或已被删除:http://plnkr.co/edit/OpVhUKLryW8rbEtJ8jgh？p = preview