Angular leaflet指令问题:第二次进入页面时除地图外其他部分不显示
Angular leaflet directive issue: other parts besides the map does't show the second time entering the page
Angular leaflet 指令问题:第二次进入页面时除地图外其他部分不显示。
我正在使用 ionic 和 angular 传单指令来开发地图功能。
在 iPhone、iOS10 上出现此问题,而在浏览器上,它工作正常。
如图1所示,右下角的面板在我第二次进入页面时不会显示,需要点击地图一两次。但是我第一次进入该页面时,它起作用了。
代码如下:
<div data-tap-disabled="true" class="map-container" style="height:100%">
<leaflet id='mapbox' defaults="defaults" tiles="tiles" lf-center="mapCenter" event-broadcast="events" maxbounds="maxbounds" markers="markersArray" width="100%" height="100%"></leaflet>
</div>
<div class="button-panel">
<div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div>
<div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div>
<div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div>
<div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div>
</div>
CSS:
.button-panel {
z-index: 1000;
opacity: 0.85;
width: 76px;
right: 80px;
bottom: 128px;
position: absolute;
}
我通过使用 ionic 指令而不是 div 解决了这个问题。
<ion-pane class="map-panel-pane">
<div class="button-panel">
<div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div>
<div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div>
<div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div>
<div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div>
</div>
</ion-pane>
Angular leaflet 指令问题:第二次进入页面时除地图外其他部分不显示。 我正在使用 ionic 和 angular 传单指令来开发地图功能。 在 iPhone、iOS10 上出现此问题,而在浏览器上,它工作正常。
如图1所示,右下角的面板在我第二次进入页面时不会显示,需要点击地图一两次。但是我第一次进入该页面时,它起作用了。
代码如下:
<div data-tap-disabled="true" class="map-container" style="height:100%">
<leaflet id='mapbox' defaults="defaults" tiles="tiles" lf-center="mapCenter" event-broadcast="events" maxbounds="maxbounds" markers="markersArray" width="100%" height="100%"></leaflet>
</div>
<div class="button-panel">
<div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div>
<div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div>
<div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div>
<div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div>
</div>
CSS:
.button-panel {
z-index: 1000;
opacity: 0.85;
width: 76px;
right: 80px;
bottom: 128px;
position: absolute;
}
我通过使用 ionic 指令而不是 div 解决了这个问题。
<ion-pane class="map-panel-pane">
<div class="button-panel">
<div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div>
<div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div>
<div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div>
<div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div>
</div>
</ion-pane>