离子滑道内的谷歌地图答案

【问题标题】：Google map inside ion-slides离子滑道内的谷歌地图
【发布时间】：2016-10-02 16:44:27
【问题描述】：

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

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

【问题讨论】：

你为什么使用 ion-slide-page 而不是 ion-slide？span>
这是他们在文档ionicframework.com/docs/api/directive/ionSlides 中使用控件的方式。一个ion-slides 滑块包含多个ion-slide-page 元素。 ion-slide 应该（如果我理解正确的话）用于已弃用的 ion-slide-box 控件。

标签： css google-maps ionic-framework

【解决方案1】：

当我给ion-slide而不是ion-slide-page时，我得到了解决方案。现在谷歌地图运行良好。

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%
}

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

【讨论】：

【解决方案2】：

所以这个类似乎是罪魁祸首。

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

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

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

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

【讨论】：

您说得对，先生。 img 样式搞砸了，因为 Google 地图中的图块是图像，而且控件有一个图像精灵来显示图标等，通过为容器中的图像设置 max-height 也搞砸了。
这正是我一直在寻找的...感谢您的解决方案。一旦允许，我将奖励赏金。