gpt4 book ai didi

javascript - 带 ionic 的单张 splinter 瓷砖

转载 作者:行者123 更新时间:2023-11-29 18:05:37 28 4
gpt4 key购买 nike

Ionic 在加载 map 时会显示这些 splinter 的图 block 。

View

我试过从 Leaflet 加载 bower 和直接加载,但没有任何改变。我正在使用一个特殊的 Leaflet 指令,但是使用纯传单代码的事件,我仍然得到这些损坏的瓷砖。

包括 index.html 中的库

<!-- Extra libraries -->
<script src="js/lib/leaflet/leaflet.css"></script>
<script src="js/lib/leaflet/leaflet.js"></script>
<script src="js/lib/leaflet/angular-leaflet-directive.min.js"></script>

map .html

<ion-view view-title="Map">
<ion-content scroll="false">
<leaflet id="map" center="map.center" defaults="map.defaults"></leaflet>
</ion-content>
</ion-view>

Controller .js

var app = angular.module('controllers', ['leaflet-directive']);

app.controller('MapController', function($scope) {
$scope.map = {
defaults: {
tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
maxZoom: 18,
zoomControlPosition: 'bottomleft'
},
center: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
};
});

最佳答案

<!-- Extra libraries -->
<script src="js/lib/leaflet/leaflet.css"></script>
<script src="js/lib/leaflet/leaflet.js"></script>
<script src="js/lib/leaflet/angular-leaflet-directive.min.js"></script>

第一行。 CSS 文件被意外链接为脚本而不是样式表。如果没有 leaflet.css,绘制 map 就会出现问题。

新代码应该是:

<!-- Extra libraries -->
<link href="js/lib/leaflet/leaflet.css" rel="stylesheet">
<script src="js/lib/leaflet/leaflet.js"></script>
<script src="js/lib/leaflet/angular-leaflet-directive.min.js"></script>

关于javascript - 带 ionic 的单张 splinter 瓷砖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31494173/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com