Question

我试图使用此链接中的示例（大多数代码不是很重要，而是我添加的微小更改是完全不同的）：

＆＃13;

angular.module('ionic.example', ['ionic'])

    .controller('MapCtrl', function($scope, $ionicLoading, $compile) {
      function initialize() {
        var site = new google.maps.LatLng(55.9879314,-4.3042387);
        var hospital = new google.maps.LatLng(55.8934378,-4.2201905);
      
        var mapOptions = {
          streetViewControl:true,
          center: site,
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        
        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var infowindow = new google.maps.InfoWindow({
          content: compiled[0]
        });

        var marker = new google.maps.Marker({
          position: site,
          map: map,
          title: 'Strathblane (Job Location)'
        });
        
        var hospitalRoute = new google.maps.Marker({
          position: hospital,
          map: map,
          title: 'Hospital (Stobhill)'
        });
        
        var infowindow = new google.maps.InfoWindow({
             content:"Project Location"
        });

        infowindow.open(map,marker);
        
        var hospitalwindow = new google.maps.InfoWindow({
             content:"Nearest Hospital"
        });

        hospitalwindow.open(map,hospitalRoute);
       
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

        $scope.map = map;
        
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        var request = {
            origin : site,
            destination : hospital,
            travelMode : google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        directionsDisplay.setMap(map); 
       
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
    
      $scope.centerOnMe = function() {
        if(!$scope.map) {
          return;
        }

        $scope.loading = $ionicLoading.show({
          content: 'Getting current location...',
          showBackdrop: false
        });
        navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          $scope.loading.hide();
        }, function(error) {
          alert('Unable to get location: ' + error.message);
        });
      };
      
      $scope.clickTest = function() {
        alert('Example of infowindow with ng-click')
      };
      
    });

＆＃13;

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

＆＃13;

<html ng-app="ionic.example">
  <head>
    <meta charset="utf-8">
    <title>Map</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>

    <!-- google maps javascript -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

  </head>
  <body ng-controller="MapCtrl">
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Google Maps Example</h1>
    </ion-header-bar>
    <ion-content>
        <div id="map" data-tap-disabled="true">
       </div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
  </body>
</html>

＆＃13;

但是，当我使用＆＃34; map＆＃34;在div周围添加<div class="row">时id如下：

<div class="row">
         <div id="map" data-tap-disabled="true"></div>
</div>

地图变得不可见，我看到宽度为0.我无法理解为什么＆＃34; row＆＃34;上课会有这种影响。

Answer 1

问题不是关于类“行”（任何其他类具有相同的效果）。原因似乎是div的内容有position: absolute，因此包含div的内容不会随内容自动延伸。要修复它，只需添加显式宽度和高度属性：

.row {
  width: 100%;
  height: 100%;
}

请参阅http://codepen.io/ramtob/pen/jbwbjZ

离子行的宽度为0px

1 个答案: