javascript - Mapbox map 已初始化

Question

我有一个 Angular 服务函数来构建一个 Mapbox map ，如下所示:

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>

当我转到一个新的 Angular View 并再次调用此函数(以使用 map 填充 id map 的新 div)时，它会给出错误:

map 容器已初始化

如何解决这个问题？

Answer 1

您必须先销毁 map ，然后才能重新初始化它。使用以下内容

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

之前

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