2

我将 jQuery mobile 用于我的 iOS 应用程序。这是我加载地图时内部发生的情况：

在此处输入图像描述

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

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>
4

1 回答 1

0

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

这里是文档

于 2013-10-22T00:06:08.593 回答