使用 Angular-Leaflet-Directive 错误地加载地图

Question

早上好！

我有一个 Web 应用程序，我在其中使用 Leafletjs 地图 (http://tombatossals.github.io/angular-leaflet-directive/#!/) 和 openstreetmap 作为图块。

地图完美运行，我可以以任何方式进行交互（添加标记、创建图层、缩放..），但是，当我访问地图所在的页面时，它无法正确加载，根据下面的打印屏幕：

当我调整窗口大小或打开和关闭控制台时它会重置。

字体：

查看：

<div class="col-md-12">
<div class="box_whiteframe_map">
    <leaflet ng-init="vm.buscaEnderecoClientesEmpresas()" center="vm.center" defaults="vm.defaults" markers="vm.markers" width="100%" height="480px"></leaflet>
</div>

CSS/SASS：

.box_whiteframe_map {
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
color: #000;
margin: 0;
clear: both;

}

控制器：

/* MAP */

vm.markers = new Array();

vm.buscaEnderecoClientesEmpresas = function() {
    vm.items = loadSaas(Cookies.get('crm_o2_hash')); // carregar saas id
    vm.items.then(function(items) { // ler array de retorno
        vm.saasid = items;
        var dados = {
            'saasid': vm.saasid
        }
        relatoriosService.carregarEnderecoClientesEmpresas(dados).then(function(response) {
            if (response.data != 'null') {
                vm.enderecoClientesEmpresas = response.data;
                angular.forEach(vm.enderecoClientesEmpresas, function(value, key) {
                    if (value.tipo == 'p'){
                        var icon = 'user';
                    } else {
                        var icon = 'cog';
                    }
                    vm.markers.push({
                        group: value.cidade,
                        lat: value.lat_lng.lat,
                        lng: value.lat_lng.lng,
                        message: value.nome,
                        icon: {
                            type: 'awesomeMarker',
                            icon: icon,
                            markerColor: 'blue'
                        },
                        label: {
                            options: {
                                noHide: true
                            }
                        }
                    });
                });
            } else {
                vm.enderecoClientesEmpresas = '';
            }

        }, function(error) {
            console.log('Erro findSemEmail: ', error);
        });
    });
}

angular.extend(vm, { // EXTEND THE PROPERTIES OF MAP (MARKERS, INITIAL LOCATION..)


    center: { // INITIAL LOCATION  .
        lat: -22.952419,
        lng: -43.211667,
        zoom: 4
    },
    defaults: {
        tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        zoomControlPosition: 'topright',
        tileLayerOptions: {
            opacity: 0.9,
            detectRetina: true,
            reuseTiles: true,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">Funil PRÓ</a>',
        },
        scrollWheelZoom: true,
        minZoom: 3,
        worldCopyJump: true
    }
});

/* MAP FINAL */

有什么帮助吗？ []的

Answer 1

你需要刷新地图：

leafletData.getMap().then(function(map) {
    setTimeout(function() {
        map.invalidateSize();
        map._resetView(map.getCenter(), map.getZoom(), true);
    }, 200);
});

另外，您需要将leafletData 注入控制器。

Answer 2

你需要添加传单css

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">