我将 jQuery Mobile 用于我的 iOS 应用程序。这是我加载 map 时内部发生的情况:
为了生成它，我使用了以下脚本。
var map
var mark
function initialize() {
var latlng = new google.maps.LatLng(52.404657,-1.491413);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
mark = new google.maps.Marker( {
position: latlng,
map:map
})
}
function mostrarUbicacion(){
navigator.geolocation.getCurrentPosition( lecturaGPS , errorGPS , {enableHighAccuracy:true} )
}
function lecturaGPS(ubicacion){
var miubicacion = new google.maps.LatLng(ubicacion.coords.latitude, ubicacion.coords.longitude);
map.setCenter(miubicacion)
mark.setPosition(miubicacion)
}
function errorGPS(){
alerta(" unable to connect")
}
html:
<body onload="initialize()" style="height:100%">
<div id="map_canvas" style="width:100%; height:50%; padding:0;"></div>
<button onClick="mostrarUbicacion()"> Click to find where you are! </button>
</body>
最佳答案
尝试以这种方式设置 map 和 css 的 div:
HTML:
<div class="Flexible-container" id="map" style="margin:1.5%;">
<!-- this is the div for the map -->
</div>
CSS:
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 32.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
要调整 div 的宽度，请使用百分比；您可以调整高度设置 padding-bottom。
关于html - 谷歌地图 API 未以全尺寸显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10437919/