如何防止LeafletJS错误消息“未找到地图容器。”从出现？

Question

如何防止LeafletJS错误消息

“未找到地图容器。”

理想情况下，我希望我的切换按钮在AngularJS组件中隐藏并显示LeafletJS地图。浏览器仅输出按钮，而不输出地图：

这是我的代码：

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/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
   <script src="https://unpkg.com/[email protected]/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>

Answer 1

使用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类使元素可见。

如何防止LeafletJS错误消息“未找到地图容器。”从出现？

问题描述投票：0回答：1

1个回答

最新问题

如何防止LeafletJS错误消息“未找到地图容器。”从出现？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1