Question

我在我的iOS应用程序中使用jQuery mobile。以下是我加载地图时发生的情况：

enter image description here

我使用了以下脚本来生成它。

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>

Answer 1

尝试以这种方式为地图和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 。

here the doc

Google地图API未以完整尺寸显示

1 个答案: