Листовка рвется при загрузке

У меня проблема с библиотекой листовок. Когда я пытаюсь загрузить карту, изображения загружаются несколько раз. Я использую листовку с angular, grunt и browserify. Я подозреваю, что это может быть из-за порядка загрузки библиотек и асинхронного выполнения, но я не уверен. Сообщений об ошибках js нет, листовка просто рвется.

Это мой файл grunt:

var $ = require('jquery');
window.jQuery = $;

//require boostrap.js for bootstrap components
var angular = require('angular');


require('ui.bootstrap');
require('showErrors');

require('leaflet');
require('leaflet-directive');

angular.module('common', [
   require('angular-resource')
]);

var requires = [
    'ngRoute',
    'leaflet-directive',
    'common',
    'ui.bootstrap',
    'ui.bootstrap.showErrors'
];
require('./common');


angular.module('app', requires).config(function($routeProvider) {

    customRouteProvider.when('/common', {templateUrl: 'js/common/1.html'});
    customRouteProvider.otherwise({redirectTo: '/'});
});

HTML-код:

<div ng-controller="mapController">
    <div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
</div>

mapКонтроллер:

module.exports = function ($scope, leafletData) {
    var map = L.map( 'map', {
        center: [20.0, 5.0],
        minZoom: 2,
        zoom: 2
    });

    L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
        subdomains: ['otile1','otile2','otile3','otile4']
    }).addTo( map );
}

Но когда я выполняю листок с кодом, он прерывается, и моя карта выглядит так: введите здесь описание изображения

Я также пробовал использовать angular-leaflet-directive со стандартным, и он все еще не работает. Кто-нибудь сталкивался с этой проблемой раньше? Какие-либо предложения?


leaflet angular-leaflet-directive
person Sanja    schedule 21.05.2015    source источник
comment
Вы изменили файл CSS Leaflet?   -  person snkashis    schedule 21.05.2015
comment
Мое единственное предположение: вы не включили файл leaflet.css.   -  person Marko Letic    schedule 08.07.2015
comment
Да. Проблема заключалась в том, что scss не поддерживает стандартный @import для файлов css.   -  person Sanja    schedule 08.07.2015
comment
Что вы имеете в виду стандартный @import? Использование @import должно быть исключением. Просто говорю.   -  person JasTonAChair    schedule 11.08.2015
comment
Я использую SaSS. Импорт файла css в файл sass невозможен с помощью @import (имя_файла.css). Для этого я включил библиотеку sass-css-importer.   -  person Sanja    schedule 13.08.2015

Ответы (2)


arrow_upward
0
arrow_downward

в вашем файле Html-код

тест с изменением стиля div: height: 80vh;

<div ng-controller="mapController">
   <div id="map" style="height: 80vh; border: 1px solid #AAA;"></div>
</div>

И проверьте инициализацию жизненного цикла компонента:

Угловой 6 — это ngOnInit.

Ionic — это ionViewDidEnter.

Идея в том, что загрузка буклета происходит после инициализации компонента.

person Facundo Ferrari    schedule 19.06.2019

arrow_upward
0
arrow_downward

Эта проблема часто возникает из-за изменения размера любого родительского контейнера, когда карта уже инициализирована.

Это мое решение в Angular 12 ссылка

person Jun    schedule 23.07.2021