带有离子的传单破碎瓷砖答案

【问题标题】：Leaflet broken tiles with ionic带有离子的传单破碎瓷砖
【发布时间】：2015-12-18 09:03:26
【问题描述】：

Ionic 在加载地图时会显示这些损坏的图块。

我已经尝试过从 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
        }
    };
});

【问题讨论】：

标签： javascript angularjs ionic-framework leaflet

【解决方案1】：

<!-- 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>

【讨论】：

【解决方案2】：

你确定这是正确的吗？

    center: {
        lat: 51.505,
        lng: -0.09,
        zoom: 4
    }

我在这里有一个完整的工作示例：DC Web Women Code(Her) Ionic Framework Sample App

【讨论】：