ionic + angularjs傳單指令：無法全屏顯示

Question

我正在使用https://github.com/calendee/ionic-leafletjs-map-demo/和更新的angular-leaflet-directive.min.js（0.7.15），因為該演示使用的是舊版本。

我無法產生如下所示的全屏按鈕： https : //tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/controls/fullscreen-example

我在mapController.js中的$ scope.map：

    $scope.map = {
      defaults: {
        //tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
        //tileLayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
          layers: {
            baselayers: {
          basemap: $scope.basemapLayers.basemap,              
          map2007: $scope.basemapLayers.map2007,
          map1998: $scope.basemapLayers.map1998,
          map1988: $scope.basemapLayers.map1988,
          map1975: $scope.basemapLayers.map1975,
          map1969: $scope.basemapLayers.map1969,
          map1955: $scope.basemapLayers.map1955
          }
        },
        controls: {
          //draw: {},
          //scale: true,
          fullscreen: {
            position: 'topleft'
          }
        }            
      },
       center: {
        lat: 1.355,
        lng: 103.840, 
        zoom: 14,
        minZoom: 12,
        maxZoom: 18
      },
      markers : {},
      events: {
        map: {
          enable: ['click', 'context'],
          logic: 'emit'
        }
      }      
    };

    $scope.map2 = {
      defaults: {
        //tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
        //tileLayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
          layers: {
            baselayers: {
          map1955: $scope.basemapLayers.map1955,
          map1969: $scope.basemapLayers.map1969,
          map1975: $scope.basemapLayers.map1975,
          map1988: $scope.basemapLayers.map1988,
          map1998: $scope.basemapLayers.map1998,
          map2007: $scope.basemapLayers.map2007,
          basemap: $scope.basemapLayers.basemap
          }
        },
        controls: {
          //draw: {},
          //scale: true,            
          fullscreen: {
            position: 'topleft'
          }
        }            
      },
       center: {
        lat: 1.355,
        lng: 103.840, 
        zoom: 14,
        minZoom: 12,
        maxZoom: 18
      },
      markers : {},
      events: {
        map: {
          enable: ['click', 'context'],
          logic: 'emit'
        }
      }          
    };

我的map.html：

<ion-view title="Historical Map">

  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button ng-click="locate();" title="Search" class="button button-icon icon ion-ios-search-strong"></button>
  </ion-nav-buttons>

<div class="row">

    <ion-content data-tap-disabled="true" class="col col-top" style="bottom: 50%";>

        <leaflet id="map1" event-broadcast="map.events" defaults="map.defaults" center="map.center" controls="map.defaults.controls" markers="map.markers" layers="map.defaults.layers" width="100%" height="100%" ng-if="map"></leaflet>

    </ion-content>

    <ion-content data-tap-disabled="true" class="col col-bottom" style="top: 50%;">

        <leaflet id="map2" event-broadcast="map.events" defaults="map.defaults" center="map.center" controls="map2.defaults.controls" markers="map.markers" layers="map2.defaults.layers" width="100%" height="100%" ng-if="map2"></leaflet>

    </ion-content>

</div>

  <ion-footer-bar class="bar-positive">

<div class="buttons pull-left">
    <button ng-click="locate();" title="Find Me" class="button button-icon icon ion-pinpoint" style="color: white;"> Find Me</button>
</div>

<div class="buttons pull-right">    
    <button data-ng-click="openModal();" data-ng-controller="MarkerController" title="Add Marker" class="button button-icon icon ion-edit" style="color: white;"> Add Marker</button>
</div>

<!--<div class="buttons pull-right">
    <button ng-click="runCamera();" title="Camera" class="button button-icon icon ion-camera" style="color: white;"> Camera</button>
</div>-->    

</ion-footer-bar>

</ion-view>

我的index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Leaflet Demo</title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link rel="stylesheet" href="css/leaflet.css" />
  <link rel="stylesheet" href="css/style.css" />

  <link href="lib/fullscreen/leaflet.fullscreen.css" rel="stylesheet">

  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <script src="lib/leaflet/leaflet.js"></script>
  <script src="lib/leaflet/angular-leaflet-directive.min.js"></script>

  <script src="lib/fullscreen/Leaflet.fullscreen.min.js"></script>

  <script src="lib/ng-cordova.min.js"></script>
  <script src="cordova.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers/mapController.js"></script>
  <script src="js/controllers/imageController.js"></script>
  <script src="js/controllers/markerController.js"></script>
  <script src="js/services/locationsService.js"></script>
  <script src="js/services/instructionsService.js"></script>
  <script src="js/directives/igTruncate.js"></script>

</head>

<body ng-app="starter" class="platform-ios platform-cordova platform-webview">
<ion-nav-view></ion-nav-view>
</body>
</html>

預習：

http://i.imgur.com/22h0pzZ.jpg -- where the red-boxed shows the missing control layer for fullscreen.

Answer 1

我很久以前一直在使用全屏控件，並像這樣添加它：

首先創建按鈕：

var fullScreenCtrl = L.control.fullscreen();

然后添加按鈕：

controls : { custom : [ fullScreenCtrl ] }