Question

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

index.html＆gt; branch_locator.html（显示包含4个map.html参数的列表视图）

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) {});

中

重新访问页面时，Google Map在Jqm / Cordova / Android页面上显示部分地图显示

1 个答案: