1
votes

Impossible de redimensionner automatiquement la hauteur de Google Map lorsque div est redimensionné

J'utilise AngularJS, jQuery UI (avec une directive personnalisée pour le redimensionnement) et Bootstrap. Sur ma page, une carte Google apparaît dans la section supérieure, et un tableau apparaîtra dans la section inférieure. Au fur et à mesure que l'utilisateur redimensionne la section inférieure, j'aimerais que Google Map se redimensionne automatiquement pour occuper l'espace restant.

J'ai essayé plusieurs approches différentes, notamment:

Réglage html, body {hauteur: 100%; width: 100%} et #mapCanvas {height: 100%} .
Utilisation de flexbox et flexgrow.
Calcul de la taille de la section supérieure après le redimensionnement de la section inférieure et modification dynamique de la hauteur de l'élément #mapCanvas en fonction de cela.

Mais je n'ai eu de chance avec aucun de ceux-ci. Toute suggestion serait appréciée. Voici un exemple illustrant le problème.

JSFiddle (au cas où la zone d'extrait de code serait masquée par les avertissements de clé de l'API Google Maps): https://jsfiddle.net/jmg157/9odt0hLn/

<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key="></script>
  </head>

  <body ng-app="mapApp">
    <div ng-controller="MapAppController">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div id="mapCanvas"></div>
          </div>
        </div>
        <div class="row" resizable>
          <div class="ui-resizable-n ui-resizable-handle"></div>
          <div class="col-md-12 col-xs-12">
            Bottom Content Section
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

html,
body {
  height: 100%;
  width: 100%;
}

#mapCanvas {
  /*height: 100%;*/
  height: 60vh;
}

.ui-resizable-n {
  border-top: 5px solid grey;
}

.table {
  background: #fff;
}

function initMap() {
  let mapOptions = {
    zoom: 8,
    minZoom: 8,
    center: new google.maps.LatLng(43, -81),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
}

let app = angular.module("mapApp", ['ui.bootstrap']);

app.directive('resizable', function() {
  return {
    restrict: 'A',
    scope: {
      callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
      elem.resizable({
        "handles": {
          "n": ".ui-resizable-n"
        }
      });
    }
  };
});

app.controller("MapAppController", function($scope) {
  initMap();
});

jquery css angularjs google-maps-api-3 twitter-bootstrap-3

2 commentaires

Vous pouvez utiliser l'événement resize et définir la hauteur du conteneur de la carte en fonction de la hauteur de l'élément redimensionnable (dans ce cas, la section supérieure est redimensionnable ...). jsfiddle.net/upsidown/dgsz4L0e

@MrUpsidown Parfait! Cette solution fonctionne très bien. J'ai juste dû peaufiner un peu le calcul pour tenir compte d'un div que j'avais en haut de la page. Si vous souhaitez publier votre commentaire en tant que réponse, je l'accepterai avec plaisir.

3 Réponses :

1
votes

En définissant l'élément supérieur sur redimensionnable et en écoutant l'événement resize et en définissant la hauteur du conteneur de la carte sur la hauteur de l'élément redimensionné.

app.directive('resizable', function() {
  return {
    restrict: 'A',
    scope: {
      callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
      elem.resizable();
      elem.on('resizestop', function(evt, ui) {
        if (scope.callback) {
          scope.callback();
        }
      });
      elem.on('resize', function(evt, ui) {

        // Set map container height based on resizable element height
        $('#map-canvas').height($('div[resizable]').height());
      });
    }
  };
});

Violon de travail complet ici .

0 commentaires

-1
votes

Il vous suffit d'obtenir la hauteur réelle de la table et d'utiliser ce code.

var newHeight = $('body').height();
$('#map').css('height', newHeight);

J'espère que cela vous aidera !!!

3 commentaires

$ ('body'). height (); vous donne la hauteur de la table? D'ACCORD.

oui c'est le cas et ensuite nous donnons à la carte la nouvelle hauteur.

Que diriez-vous alors de fournir un extrait de code fonctionnel complet, afin que nous puissions voir comment votre solution fonctionne?

0
votes

J'ai une barre de menus en haut de la carte. Quand j'ai ajouté des géométries, elles se cachaient derrière la barre de menus, ce que je ne voulais pas. J'ai donc obtenu la hauteur de la barre de menu, puis l'ai supprimée de la hauteur de la carte. Maintenant, j'ai appliqué cette hauteur pour la carte.

//Setting up map with initial properties
$scope.map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: new google.maps.LatLng(latCenter, longCenter),
    fullscreenControl: false,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

//Restricting the zoom levels for the user
var opt = { minZoom: 1, maxZoom: 16 };
$scope.map.setOptions(opt);

//removing the top menubar height
var newHeight = $('body').height() - 41 + 'px';
//setting up the map from 100% to the new height
$('#map').css('height', newHeight);

0 commentaires