Как предотвратить сообщение об ошибке Leaflet JS «Контейнер карты не найден». от появления? - PullRequest
Новая
       28

Как предотвратить сообщение об ошибке Leaflet JS «Контейнер карты не найден». от появления?

0 голосов
/ 14 февраля 2020

Как предотвратить сообщение об ошибке Leaflet JS

"Контейнер карты не найден".

В идеале я хочу, чтобы моя кнопка переключения скрывала и показывала Листовка JS map, в моем AngularJS компоненте. Браузер выводит только кнопку, а не карту:

изображение вывода в веб-браузере

Вот мой код: 

var app = angular.module('leafletEditor', []);
app.component('sampleMap', {
    controller: 'appCtrl',
    template: `
        <button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
        <div id="map" style="width: 400px; height: 300px; border: 1px solid #ccc"
             ng-if="hideShow" >
        </div>
    `
}).controller('appCtrl', function ($scope, $window, $timeout) {

    var self = this;
    self.myCustomStyle = {
        stroke: false,
        fill: true,
        fillColor: '#fff',
        fillOpacity: 1
    }

    self.osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    self.osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
    self.osm = L.tileLayer(self.osmUrl, { maxZoom: 18, attribution: self.osmAttrib });

    self.southWest = L.latLng(-90, -180);
    self.northEast = L.latLng(90, 180);
    self.maxBounds = L.latLngBounds(self.southWest, self.northEast);
    self.map = L.map('map', {'self.maxBounds':'self.maxBounds'}).setView([0, 0], 5);

});

<head>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body>

    <div ng-app="leafletEditor">
        <sample-map></sample-map>
    </div>

</body>

1 Ответ

0 голосов
/ 14 февраля 2020

Используйте директиву ng-show: 

app.component('sampleMap', {
    controller: 'appCtrl',
    template: `
        <button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
        <div id="map" style="width: 400px; height: 300px; border: 1px solid #ccc"
             ̶n̶g̶-̶i̶f̶=̶"̶h̶i̶d̶e̶S̶h̶o̶w̶"̶ 
             ng-show="hideShow" >
        </div>
    `
})

Директива ng-if преобразует элемент в узел комментария HTML и добавляет элемент только в том случае, если условие true. С другой стороны, директива ng-show делает элемент видимым, изменяя классы CSS.

...