Карта буклета не покрывает всю область карты
Обновлять: Я написал свой ответ. Пожалуйста, посмотрите это.
Оригинальный вопрос:
Можете ли вы сказать мне, почему листовка карта не отображается на всей области карты?
.html
<ion-content padding>
<div style = "height: 100%;width:100%" leaflet [leafletOptions] = "options" *ngIf = "options" [leafletCenter] = "center">
</div>
</ion-content>
.тс
init(): void {
this.options = {
layers: [
tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
],
zoom: 10,
center: this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude"))),
attributionControl: false,
};
}
интерфейс
Пожалуйста, смотрите изображение. Кажется, проблема с transform. По умолчанию это было 0,0,0. Я изменил его вручную в браузере вот так. Итак, как я могу установить его на карту?
@ghybs Пожалуйста, посмотрите мое обновление и дайте мне совет.
Возможный дубликат Вкладка переключения данных не загружает карту Leaflet
@IvanSanchez Это не сработало. Это работает для меня: stackoverflow.com/a/55622789/1077309
Ответы 6
По моему мнению, листовка заполнена на 100% в своем родительском пространстве, можете ли вы использовать инструмент проверки браузера, чтобы увидеть, какова ширина и высота родителей. Вы также можете попробовать использовать
положение: абсолютное; слева: 0;
игнорировать ширину родителей
Попробуйте удалить отступ и изменить высоту на 100vh.
Попробуй это:
<ion-content>
<div style = "height: 100vh; width:100%" leaflet [leafletOptions] = "options" *ngIf = "options" [leafletCenter] = "center">
</div>
</ion-content>
Если вы хотите установить преобразование, сделайте это так:
<ion-content padding>
<div style = "height: 100%; width:100%; transform: translate3D(250px, 200px, 100px)" leaflet [leafletOptions] = "options" *ngIf = "options" [leafletCenter] = "center">
</div>
</ion-content>
У меня была такая же проблема в проекте ionic 4. Как было предложено в комментарии к связь, мне нужно было использовать map.invalidateSize() при рендеринге карты, а также при добавлении/удалении маркеров или любых других действиях в этом отношении. Это не помогло полностью. После этого мне также пришлось вручную запускать обнаружение изменений. Вот пример из нашего кода:
this.map.setView([this.myLocation.latitude, this.myLocation.longitude], 13);
this.map.invalidateSize();
this.ref.detectChanges();
где ref относится к ChangeDetectorRef.
Также убедитесь, что в ваш файл angular.json импортирован css листовки:
"styles": [
// ....
"./node_modules/leaflet/dist/leaflet.css"
]
Здесь я использую это с приложением Ionic 4. Я пробовал много решений, предоставленных разными разработчиками. Но ни один из них не работал для меня. Проблема здесь в событии life cycle, которое я использовал ранее. Так что теперь я использую ionViewDidEnter() и никаких проблем.
ionViewDidEnter() {
this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude")));
this.options = {
layers: [
tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
],
zoom: 17,
center: this.center,
attributionControl: false,
};
this.layers.push(this.mapService.getMarker(this.center, "assets/icon/map/placeholder.png"));
}
Точнее, здесь вы откладываете инициализацию карты, назначая позже члена options, который управляет *ngIf контейнера карты с его директивой leaflet в вашем шаблоне. Если вместо этого вы аннулируете размер карты в этом хуке жизненного цикла, результат должен быть таким же.
@ghybs Я сделал это. Но это не сработало для меня. Может быть, я сделал это неправильно.
У меня была та же проблема, даже с импортом leaflet.css и трюком «invalidateSize()».
Это потому, что я написал в «myComponent.page.html»:
<ion-content>
<div id = "map" style = "height:400px; width: 100%;"></div>
</ion-content>
Кажется, Ionic4 css конфликтует с листовкой.
Вам нужно получить <div>снаружи<ion-content>.
Правильно просто:
<div id = "map" style = "height:400px; width: 100%;"></div>
Надеюсь, это поможет кому-то
карта.invalidateSize() запускается после события изменения размера окна.
Итак, после изменения высоты просто напишите код:
window.dispatchEvent(new Event('resize'));
this.map.invalidateSize();
В моем случае это работает как шарм. Не забудьте заменить карта на переменную вашей карты. Мое это помогает кому-то
Скорее всего stackoverflow.com/questions/36246815/…