Jqm/Cordova/Android页面重访页面时Google Map部分地图显示

Question

我正在尝试使用 Google 地图支持构建 Jqm/Cordova/Android 应用程序。我使用 jQuery Map UI 来显示地图，使用通过列表视图中的 URL 链接传递的变量。当我第一次访问该页面时，它会正确显示地图，但当我重新访问该页面时，它会显示地图的一部分。

index.html > branch_locator.html（显示带有 map.html 的 4 个 URL 参数的列表视图）

map.html : http://i.imgur.com/h19SP01.jpg?1

重访map.html：http://i.imgur.com/1ZPP1Ar.jpg?1

这是 map.html 的代码示例：

<div data-role="page" data-theme="f" id="Gomap" style="width:100%; height:100%;">

<div role="banner" class="ui-bar-a ui-header" data-role="header" data-position="fixed" data-tap-    toggle="false">
<a data-transition="slide" data-theme="f" href="branch_locator.html"  data-rel="back" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l">
                      <span class="ui-btn-inner ui-btn-corner-all">
                        <span class="ui-btn-text">
                          Back
                        </span>
                        <span class="ui-icon ui-icon-arrow-l ui-icon-shadow">
                        </span>
                      </span>
                    </a>
                    <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">
                      Google Map
                    </h1>

                </div>

                <div data-role="content" style="width:100%; height:100%; padding:0;">

                    <div id="map_canvas" style="height:100%;"></div>

                    Loading map....

                </div>

                <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="foot">

                  <h4>
                    Developed by Md. Thuhidul Islam Khan
                  </h4>

                </div>
                <!-- /footer -->

<script type="text/javascript" src="js/map.js"></script>

</div>

用于 map_canvas 的 CSS ：

#map_canvas
{
position: absolute !important;
top: 40px !important;
bottom: 40px !important;
left:20px !important;
right:20px !important;
}

map.js 代码：

var latt1;

var longg1;

var latt2;

var longg2;

$("#Gomap").on("pageshow", function(e) {

var s = $(this).data("url");

var lat1Part = s.split("&")[0];

var long1Part = s.split("&")[1];

var lat2Part = s.split("&")[2];

var long2Part = s.split("&")[3];

latt1 = lat1Part.split("=")[1];

longg1 = long1Part.split("=")[1];

latt2 = lat2Part.split("=")[1];

longg2 = long2Part.split("=")[1];


});


loadScript();

function initialize() {


$('#map_canvas').empty();

var ur_pos = new google.maps.LatLng(latt1, longg1);

var br_pos = new google.maps.LatLng(latt2, longg2);

$('#map_canvas').gmap();
$('#map_canvas').gmap({
'center': ur_pos
});
$('#map_canvas').gmap({
'zoom': 6
});

$('#map_canvas').gmap('addMarker', {
'position': br_pos,
'bounds': true,
'icon':'img/logo.png',
'animation': google.maps.Animation.DROP
}).click(function() {

$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>This is a AIBL Branch</B>'
}, this);

});

$('#map_canvas').gmap('addMarker', {
'position': ur_pos,
'bounds': true,
'animation': google.maps.Animation.DROP
}).click(function() {

$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Your Current Position</B>'
}, this);

});

$('#map_canvas').gmap('refresh');
}

function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=Google Map Key&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}

我需要帮助来解决问题。如需更多代码示例，请询问。

Answer 1

把loadScript();放在$("#Gomap").on("pageshow", function(e) {});里面