[英]Leaflet broken tiles with ionic
加载地图时,Ionic会显示这些碎片。
我已经尝试过从Leaflet加载凉亭和直接凉亭,但是没有任何变化。 我正在使用特殊的Leaflet Directive,但使用纯的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>
controllers.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,则绘制地图时会出现问题。
新代码应为:
<!-- 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>
您确定这是正确的吗?
center: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
我在这里有一个完整的工作示例: DC Web Women Code(Her)Ionic Framework示例应用程序
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.