Question

我想在离子幻灯片中显示一个地图，如我创建的codepen http://codepen.io/4spins/pen/dXPBGy所示，但由于某种原因，地图未按预期呈现（地图控件显示为倾斜，并且未显示切片，只有灰色区域）

如果我完全注释掉离子滑动部件并在ionic.Platform.ready（而不是$ionicSlides.sliderInitialized）中初始化地图，那么一切看起来都很正常。

Answer 1

当我提供ion-slide代替ion-slide-page时，我得到了解决方案。现在Google地图工作正常。

<强>的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></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <link rel="stylesheet" href="lib/angular-chart.js/dist/angular-chart.css">
    <script src="http://maps.google.com/maps/api/js"></script>
    <!-- your app's js -->
    <!-- <script src="js/mqttws31.js"></script> -->
    <script src="js/app.js"></script>
    <script src="js/sample.js"></script>
</head>

<body ng-app="ionicApp">
    <ion-nav-view></ion-nav-view>
</body>

</html>

<强> sample.html

<ion-view view-title="Sample" hide-nav-bar="true">
     <ion-header-bar align-title="center" class="bar-positive">
        <h1 class="title">Sample</h1>
        <div class="buttons">
            <button class="button" ng-click="showList()">List</button>
            <button class="button" ng-click="showMap()">Map</button>
        </div>
    </ion-header-bar>
    <ion-content scroll="false" class="has-header">
        <ion-slide-box delegate-handle="bottomSlide" show-pager="false">
            <ion-slide>
                <div class="box yellow">
                    <h1>List</h1></div>
            </ion-slide>
            <ion-slide>
                <div class="box blue">
                    <div id="map" data-tap-disabled="true"></div>
                </div>
            </ion-slide>
        </ion-slide-box>
    </ion-content>
</ion-view>

<强> app.js

angular.module('ionicApp', [
    'ionic',
])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);

        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

<强>控制器

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

    $scope.options = {
        loop: false,
        speed: 500,
        onlyExternal: true,
        pagination: false
    }
    $scope.showMap = function() {
        gotoSlide(1);
    };

    $scope.showList = function() {
        gotoSlide(0);
    };
    var gotoSlide = function(index) {
        $scope.$broadcast('slideBox.setSlide', index);
    }

    function initializeMap() {
        var myLatlng = new google.maps.LatLng(43.07493, -89.381388);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Uluru (Ayers Rock)'
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });

        $scope.map = map;
    }
    google.maps.event.addDomListener(window, 'load', initializeMap);


});

<强>式

.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
body {
    cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

h1 {
    color: white;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.box {
    height: 100%
}

#map {
    width: 100%;
    height: 100%
}

如果您需要完整的源代码。请告诉我。谢谢

Answer 2

所以这堂课似乎是罪魁祸首。

.swiper-slide img {
    max-height: 100%;
}

将其添加到CSS中以简单地覆盖它。

#map img {
    max-height: none !important;
}

看看它是否破坏了其他任何东西。

离子幻灯片中的谷歌地图

2 个答案: