Leaflet gibt eckige Probleme beim Anzeigen und Verbergen aus? Willst du $ Timeout loswerden

Question

Ich habe eine Broschüre erstellt mit L.map ('Mapelement') aufgerufen werden. Das Problem ist, dass, wenn ich auf eine Schaltfläche klicke, die die Flugblattkarte "verbirgt" und dann erneut auf die Schaltfläche klickt, wird die Flugblattkarte nicht angezeigt. Wenn ich jedoch ein setTimeout in die Link-Funktion einfüge, bevor die Karte erstellt wird, und auf 2 Sekunden setze, wird die Karte jedes Mal angezeigt (obwohl ich 2 Sekunden warten muss). Gibt es eine bessere Alternative zur Verwendung von $ timeout in meiner benutzerdefinierten "leaflet-map" -Direktive zum ein- und ausblenden?

Answer 1

Würde CSS Ihnen helfen?

eine Karte in einem sichtbaren div erstellen

visibility: visible 

die zweite Karte erstellen in einem versteckten div

visibility: hidden 

Position sowohl Ihre div in der gleichen Position

position: absolute 

Wenn Sie möchte nur die Sichtbarkeit der divs wechseln

Beispiel: http://plnkr.co/edit/voTjyMLKTxUC183nf8ML?p=preview (Leider nicht eckig ist)

Answer 2

ich ohne zu sehen, alle Ihre Codes ein naives Beispiel einer Broschüre-Karte-Richtlinie erstellt und sind die Anzeige der Karte durch ng-Show Makel. Es funktioniert ohne $ Timeout. Es ist schwer zu bestimmen, woher deine Probleme stammen, ohne Code zu sehen oder zu wissen, wie du die Anzeige der Karte umschalten willst.

angular.module('demo', []) 
 

 
.directive('leafletMap', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     mapOptions: '&' 
 
    }, 
 
    template: '<div><button ng-click="toggleShow()">Toggle Map</button><div class="demo-map" ng-show="isShown"></div></div>', 
 
    link: function(scope, elem, attrs) { 
 
     // Find element to bind to map 
 
     var mapElem = elem.children().find('div')[0], 
 
     // get map options from isolate scope 
 
     mapOptions = scope.mapOptions(); 
 

 
     // State of hide/show 
 
     scope.isShown = true; 
 

 
     // Create Map. 
 
     var map = L.map(mapElem, mapOptions); 
 

 
     // Just taken from leaflet example 
 
     L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 
 
     maxZoom: 18, 
 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
 
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
 
      'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
 
     id: 'mapbox.streets' 
 
     }).addTo(map); 
 

 
     // method to toggle the shown/hidden state of map 
 
     scope.toggleShow = function() { 
 
     scope.isShown = !scope.isShown; 
 
     }; 
 

 
     // cleanup on element destroy 
 
     elem.on('$destroy', function() { 
 
     map.remove(); 
 
     }); 
 
    } 
 
    }; 
 
}) 
 

 
.controller('DemoController', function() { 
 
    this.mapOptions = { 
 
    center: [51.505, -0.09], 
 
    zoom: 13 
 
    }; 
 

 

 
});

.demo-map { 
 
    height: 500px; 
 
}

<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
 
<div ng-app="demo" ng-controller="DemoController as ctrl"> 
 
    <leaflet-map map-options="ctrl.mapOptions"></leaflet-map> 
 
</div>