Angular Mapbox против Angular Leaflet Mapbox против Angular карт Google

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


google-maps-api-3 angularjs leaflet mapbox angular-leaflet-directive
person Alex    schedule 02.09.2015    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Почему бы не написать свою собственную простую директиву, которая передает экземпляр карты в область действия вашего контроллера, чтобы вы могли в полной мере воспользоваться API js mapbox? Директивы, доступные для 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

person iH8    schedule 03.09.2015
comment
iH8, спасибо за ваш вклад. Я решил использовать Angularjs-Google-Maps (ngMap), потому что я обнаружил, что это самый простой способ получить карту со многими функциями. Он также имеет хорошую документацию. - person Alex; 04.09.2015
comment
извините, если я пропустил что-то очевидное, но откуда L? Я только что наткнулся на это, и это кажется достаточно простым, но я получаю L is not defined - person Justin Kruse; 13.02.2017
comment
ах, кажется, ruby ​​не включает mapbox.js из моих компонентов Bower... Я все еще копаю, но если у вас есть какие-либо советы, я был бы очень признателен! - person Justin Kruse; 13.02.2017
comment
Извините за последовательность, но мне нужно было добавить к application.js: //= require mapbox.js/mapbox.js - person Justin Kruse; 13.02.2017
comment
@JustinKruse mapbox.js — это плагин Leaflet, а L — объект Leaflet. - person Saifee; 14.06.2017