Ionic：新幻灯片（Swiper）+ angular-google-maps 在拖动时会导致灰色空间

Posted 2023-05-08

【中文标题】Ionic：新幻灯片（Swiper）+ angular-google-maps 在拖动时会导致灰色空间

【英文标题】：Ionic: New slides (Swiper) + angular-google-maps lead to grey space when dragging

【发布时间】：2016-08-09 22:25:16

【问题描述】：

当结合新的幻灯片（又名 Swiper）和 angular-google-maps 时，无法在 Google 地图中拖动，而是会导致灰色空间。

当我们通过 .lockSwipes() 禁用滑动时也会发生这种情况

我也没有成功尝试过的是这些属性：

onlyExternal: true
touchMoveStopPropagation: false
preventClicksPropagation: false

最后，我发现像建议的here 那样使用 google.maps.event.trigger(MapInstance, 'resize') 也不起作用。

这是我的代码：

<ion-slides options="swiper">
  <ion-slide-page>
    <ui-gmap-google-map control="map.control" center='map.center' zoom='map.zoom'
    </ui-gmap-google-map>
  </ion-slide-page>
</ion-slides>

在我的 .js 中：

angular.module('ionicApp', ['ionic', 'uiGmapgoogle-maps'])
.controller('MainCtrl', function($scope) 
  $scope.swiper = 
    onInit: function(swiper)
      swiper.lockSwipes();
    
  ;
  $scope.map =  control:, center:  latitude: 45, longitude: -73 , zoom: 8 ;
);

这是一个显示我的问题的 plunkr：http://plnkr.co/edit/JiAw0oXRxLGgL3SrE6PK?p=preview2

【问题讨论】：

你得到答案了吗？

没有。我最终用 ng-show 将我的幻灯片更改为 div。不是一个好的解决方案，但至少我的地图可以再次使用。

【参考方案1】：

在拉了我自己的头发两个小时后，我终于在这里找到的解决方案对我有用： https://forum.ionicframework.com/t/google-map-inside-ion-slides-display-issue/53743/2

总而言之，Swiper 与谷歌地图下的 CSS 混为一谈。由于我使用的是 ng-map，这条线对我有用：

ng-map img  max-height: none !important;