Угловой Mapbox vs Угловой листок Mapbox vs Angular google maps

Question

Я довольно растерялся, на каком из них использовать. В настоящее время я использую угловой mapbox ->http://inkblot.io/angular-mapbox, но документы не объясняют некоторые функции, которые я хочу, как подключить маркеры из вызова API с линиями и как получить карту в центре на маркеры при ее создании. Угловой Mapbox отлично использовал $ scope для визуализации данных, но я думаю о переключении на что-то еще, чтобы иметь эти другие функции. Кто-нибудь знает простое решение для предоставления данных с использованием ngrepeat с $ scope, соединяя эти маркеры с линиями и имея карту, центрированную при создании этих маркеров?

Answer 1

Почему бы не написать свою собственную простую директиву, которая передает экземпляр карты в область вашего контроллера, чтобы вы могли в полной мере воспользоваться преимуществами mapbox js api? Директивы, которые доступны для Angular, как и тот, который вы связали, угловые-буклет-директивы и угловые-google-карты настолько раздуты и сложны, что в конечном итоге вы получите медленное приложение. Если вы только покажете пару маркеров и полилиний, это просто перебор, и вы будете болеть, как сумасшедший. Плюс тот факт, что они в большинстве случаев плохо документированы, обновляются и в основном неполные (без полного охвата 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); 
    }; 
    } 
]); 

Директива инициализирует карту, передает экземпляр карты обратно на ваш контроллер r scope, и вам хорошо идти и делать все, что вам нравится. У меня был рабочий пример на Plunkr, но Mapbox аннулировал примерный ключ и карту. У меня есть полный рабочий пример, но он не использует Mapbox, он использует Leaflet, но принцип остается тем же, вы можете его протестировать здесь: http://plnkr.co/edit/gax5NL7DX2PWmJXKP9YD?p=preview

Найден пример картотеки, имейте в виду, что он не поскольку токены истекли или были удалены: http://plnkr.co/edit/OpVhUKLryW8rbEtJ8jgh?p=preview