html - 谷歌地图 API 未以全尺寸显示-6ren

html - 谷歌地图 API 未以全尺寸显示

转载作者：行者123 更新时间：2023-11-28 03:41:45

我将 jQuery Mobile 用于我的 iOS 应用程序。这是我加载 map 时内部发生的情况:

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>

最佳答案

尝试以这种方式设置 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%;
}