MapBox карта уже инициализирована

Question

У меня есть Угловая сервисная функция, чтобы построить MapBox карту как так:

app.service("MapService", [function(){ 

    //mapbox vars 
    var map = { 
     minZoom: 11, 
     id: "xxxxxxxx", 
     token: "xxxxxxxx" 
    }; 


    //build map 
    this.buildMap = function(lat, lon, zoom){ 

     //map bounds 
     var southWest = L.latLng(54.04407014753034, -0.745697021484375), 
      northEast = L.latLng(53.45698455620496, -2.355194091796875), 
      bounds = L.latLngBounds(southWest, northEast); 

     //build map object 
     L.mapbox.accessToken = map.token; 
     map.obj = L.mapbox.map("map", map.id, { 
     maxBounds: bounds, 
     zoomControl: false, 
     minZoom: map.minZoom, 
     attributionControl: false 
     }).setView([lat, lon], zoom, { 
     pan: { animate: true }, 
     zoom: { animate: true } 
     }); 

    } 

    }]); 

Это просто заполняет DIV:

<div id="map"></div> 

Когда я иду к новому углового зрения и вызвать эту функцию снова (для заполнения новой div с идентификатором map с картой) он дает мне ошибку:

Map container is already initialized

Как решить эту проблему?

Answer 1

Перед повторной инициализацией необходимо уничтожить карту. Используйте следующие

if(map.obj != undefined) map.obj.remove(); 

перед тем

map.obj = L.mapbox.map("map", map.id, { 

Answer 2

Использование директивы гораздо больше подходит для такого рода целей, вы не столкнетесь вещи, как это. В следующих директивах я использую листовку, но это так же, как с помощью MapBox (MapBox является расширенной версией листовки):

angular.module('app').directive('leaflet', [ 
    function() { 
    return { 
     restrict: 'EA', 
     replace: true, 
     template: '<div></div>', 
     link: function (scope, element, attributes) { 
      scope.$emit('leaflet-ready', new L.Map(element[0])); 
     } 
    }; 
    } 
]); 

Используйте его на вашем взгляде:

контроллера:

angular.module('app').controller('map1Controller', function($scope) { 
    $scope.$on('leaflet-ready', function (e, leaflet) { 
    // leaflet var contains map instance, do stuff 
    }) 
}); 

Вот пример концепции: http://plnkr.co/edit/SFgGhVUtBOqsIwYuwNuv?p=preview