Lorsque vous affichez une carte Google dans JQuery Mobile, il apparaît (après avoir lu les forums) que le code comme ce qui suit est requis: enlever la hauteur sur l'extérieur de div causant la baisse de la Div. à la hauteur 0 et la carte ne s'affiche pas. J'espérais obtenir du texte dynamique sous la carte (basé sur le contenu de la) quelle longueur je ne sais pas, je ne peux donc pas définir une hauteur absolue. Quelqu'un a-t-il une solution de contournement pour ce problème?
4 Réponses :
Ce n'est pas une question liée à Google Maps, la chose est que vous devez définir une largeur et une hauteur spécifiques pour votre canevas de carte, votre code pourrait être réécrit comme suit:
<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="padding:0;">
<div id="map_canvas" style="width:300px; height:300px;"></div>
<p id="text">Lorem ipsum legere facilisi conclusionemque pro et, sint aperiam vel at. No postea scaevola vivendum duo, et vix erant paulo. Ex fuisset perfecto vix. No sit laudem noster scriptorem, probatus assueverit ius cu.</p>
</div>
</div>
Le problème ici est que, alors il n'y a aucun moyen d'avoir la carte remplir l'écran sur tous les périphériques.
Je ne suis pas expert sur le développement Web mobile, mais je suppose qu'il devrait y avoir des articles sur la détection de la taille de l'écran mobile, comme cet article ? De cette façon, vous pouvez appliquer différents styles en fonction de l'appareil.
Ces jours-ci, il existe de nombreuses tailles différentes d'écrans de téléphones intelligents, ce qui permettra à une CSS pour chacun signifierait que je devrais faire l'objet de tester sur chacun de ces appareils également, ce qui rend également le dispositif spécifique CSS n'est guère une bonne pratique.
Vous pouvez facilement faire cette carte en utilisant une largeur: 100%; Hauteur: 100% et avoir le parent div comme position: absolu; Top: 0; gauche: 0; droite: 0; bas: 0; - Ceci est une pratique assez courante pour atteindre l'écran complet sur n'importe quel appareil, si cela échoue, son super simple à créer une solution JS
@Blowsie: fonctionne comme un charme. Mais puisque position est absolu , vous devez ajouter le top TOP: xxpx; pour tenir compte de l'en-tête.
Correction rapide et sale qui a fonctionné pour moi:
Pouvez-vous ajouter plus de contexte? Où que ce soit dans le cycle de vie de la page, appelez-vous cela?
Cela fait longtemps que je n'ai plus le code, mais je pense que cela a été appelé sur l'événement de charge de Google Map et également sur le changement d'orientation.
Il existe un exemple officiel pour cela ici: http: // Voir.jquerymobile.com/master/demos/examples/maps/geolocalisation.php
HTML: P>
.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }
Eh bien, ici comment je l'ai fait et cela a fonctionné pour moi.
.classHeader{
height:10% !important;
}
.classFooter{
height:10% !important;
}
#map_canvas{
padding-top:10%;
padding-bottom:10%;
height:auto;
position:absolute;
width:100%;
height:88%;
max-height:1600px;
overflow:hidden;
display:block;
}