Question

我正在使用jquery mobile创建网页，我按照此处的教程进行操作：https://www.youtube.com/watch?v=yANtE1b8cLc 基本上简单来说，视频是关于在谷歌地图上添加多个标记，然后确保所有标记同时显示在地图上。

我的问题是当我加载页面时，无论是在我的手机还是我的电脑上，地图的大小都不正确，但地图的高度和宽度应该是可见的

现在，如果我刷新页面，地图就会变成全尺寸。

我只是猜测，但也许页面加载没有完成加载谷歌地图api但我只是在猜测

以下是我用来创建地图的代码

function init() {         
var mapDiv = document.getElementById("map_canvas3");           
var mapOptions = {
center: new google.maps.LatLng(48.8582, 2.2945),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv, mapOptions);

var locations = [];
locations.push ( {name:"Eifel Tower", latlng: new         

google.maps.LatLng(48.8582, 2.2945)} );
locations.push ( {name:"The Louvre", latlng: new   

google.maps.LatLng(48.8611, 2.3364)} );

var bounds = new google.maps.LatLngBounds ();
for (var i=0;i<locations.length;i++ ) {
var marker = new google.maps.Marker({position: locations[i].latlng,          

map:map, title:locations[i].name});
bounds.extend (locations[i].latlng);

}
map.fitBounds (bounds);

}
window.onload = init;

这是html

<div data-role="page" id="mapEiffelTower" >

<div data-role="header">
    <a href="#homePage"  class="ui-btn-left ui-btn ui-icon-back ui-    

btn-icon-notext ui-shadow ui-corner-all"  data-role="button"   

role="button">Back</a>
    <img src="assets/Logo-01.png" id="logoHeader" alt="logo"/>
    <!--<a href="index.html" class="ui-btn ui-icon-bars ui-btn-icon-  

notext "></a>-->


</div> <!--end of header-->

<div data-role="content" >
<div id="map_canvas3">
</div>

</div> <!-- end of content -->



</div> <!-- end of mapEiffelTower page -->

这就是我现在的样子

！https://www.flickr.com/photos/rubberducky/16487881658/

我可以输入一行代码来解决此问题吗？

除非您使用jquery mobile刷新页面，否则Google地图不是完整尺寸

0 个答案: