jQuery Mobile ile tam ekran google haritasını nasıl görüntüleyebilirim?

Aşağıdaki kodda garip çıkış görüntülenir. Tam ekranlı bir mobil harita görmeliyim. Ancak bazı sebeplerden dolayı ekranın sadece bir kısmında gösterilir. Eşleme için jquery.ui.map kullanıyorum.jQuery Mobile ile tam ekran google haritasını nasıl görüntüleyebilirim?

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script src="js/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.ui.map.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="map_canvas" name="contentMain"> 

    </div><!-- /content --> 

</div><!-- /page --> 
<script> 

    $('#map_canvas').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it 
    // see http://en.wikipedia.org/wiki/Same_origin_policy 
    $.getJSON('http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) { 
     $.each(data.markers, function(i, marker) { 
      $('#map_canvas').gmap('addMarker', { 
       'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
       'bounds': true 
      }).click(function() { 
       $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this); 
      }); 
     }); 
    }); 
}); 
</script> 
</body> 
</html>

Çıktı: önceden

enter image description here

teşekkürler.

kaynak

2012-05-02 Shahjalal

Mobil web sitem için çözüm, tuval div için position:absolute; width:100%; height:100%; stillerini ayarlamaktı. Araç çubukları için alan bırakmak için top ve bottom stillerini kullanabilirsiniz.

kaynak

2012-05-02 00:48:26

sayesinde – Shahjalal

'pozisyon: absolute' ne olduğunu ben WA Eksik, teşekkürler! – Dennis

haritayı yeniden boyutlandırmayı da düşünür: google.maps.event.trigger (map, "resize"); –

Konteyner ve harita kanvasının% 100 genişlik ve yükseklik olması gerekir.

<div data-role="page" id="map-page" data-url="map-page"> 
    <div data-role="header" data-theme="c"> 
     <h1>Maps</h1> 
    </div> 
    <div data-role="content" id="map-canvas"> 
     <!-- map loads here... --> 
    </div> 
</div>

Ve CSS: Buradan

#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

kaynak

2013-06-01 11:49:09

Üstbilgi ve altbilgi sen eğer kaçınılmaz onların yapıdır jQuery mobil web sitesinden

jQuery'yi kullanarak. Hem üstbilgi hem de altbilgi için {data-position="fixed" data-fullscreen="true"} ayarlayıp

html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; }

'u da ayarladım, böylece hem menü hem de harita mobil aygıtta mükemmel bir şekilde çalışıyor.

kaynak

2014-07-25 17:02:06

Bir gün için bu çözümü arıyorum. Bu inanılmaz iyi çalışıyor! Çok teşekkürler. –

Bunun için biraz uğraştım ve mükemmel çözümü bulmayı başardım. Bir başlık içeren veya içermeyen sayfalar için geçerlidir. Herhangi bir çözünürlük ve herhangi bir başlık yüksekliği için haritayı üstbilgi ve sayfanın alt kısmı (veya bir başlık yoksa tüm sayfa) arasındaki boşlukta mükemmel şekilde konumlandıracaktır.

Bu çözüm, sayfanın bir üstbilgisi varsa CSS ve JS'yi ve yalnızca sayfanın bir üstbilgisi yoksa CSS'yi gerektirir.

HTML

<div data-role="page" id="mapPage"> 
    <div data-role="header"`> 
     <!-- your header HTML... --> 
    </div> 

    <div data-role="content"> 
     <div id="map-canvas"></div> 
     <p id="nogeolocation"></p> 
    </div> 
</div>

CSS

#map-canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

/* eliminates scrollbars in map infowindow (optional) */ 
#mappopup { 
    line-height: 1.35; 
    overflow: hidden; 
    white-space: nowrap; 
}

JS o ... çalışır ..

var mapPageHeader = $("#mapPage .ui-header").eq(0); 
if(mapPageHeader.length > 0) { 
    var headerHeight = mapPageHeader.outerHeight(); 
    $("#map-canvas").css({ 
     'height': ($(window).height() - headerHeight + 1) + 'px', 
     'top': headerHeight - 1 
    }); 
}

kaynak

2015-07-19 19:22:00

jQuery Mobile ile tam ekran google haritasını nasıl görüntüleyebilirim?

cevap

İlgili konular