我目前正处于一个项目的中间，偶然发现了一个问题。我有一个名为index.html的HTML文件，它包含我的应用程序的基本功能页面（欢迎页面，登录和注册）以及成功登录后到达的第二个名为home.html的HTML页面，该页面假设显示一个传单地图用户位置。问题是，当我成功登录地图时，除非我刷新页面，否则不会显示。
在过去的几天里，我尝试了将地图JS放在第二个HTML页面上的每个组合。我已经尝试将代码放在div数据角色部分内的脚本标记中，我仍然需要刷新才能看到地图。我知道JQM只调用div data-role。正在调用代码，因为我被提示允许位置，如果我登录到控制台，则调用JS但仍然没有映射。
的index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery and JQuery mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Bootstrap -->
<!--<link rel="stylesheet" href="../resources/bootstrap/dist/css/bootstrap.min.css">
<script src="../resources/bootstrap/dist/js/bootstrap.min.js"></script>-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- LeafletJS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<!-- CSS & Scripts -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/header.css">
</head>
<body>
<!-- Login Page Begin -->
<div data-role="page" id="loginPage">
<div data-role="main" class="ui-content">
<h2 class="text-center"><strong>Login to GeoBus</strong></h2>
<div class="loginForm">
<form method="post">
<fieldset data-role="controlgroup">
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input class="form-control" type="email" id="email" placeholder="user@user.com" required="required">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input class="form-control" type="password" id="password" placeholder="Enter a Password" required="required">
<br>
</div>
<div class="form-group">
<button type="submit" id="loginButton" value="Login">Login</button>
</div>
</fieldset>
</form>
<div class="alert alert-danger" id="failAlert">
</div>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
index.js
$('#loginButton').click(function () {
var passwordStrengthRegex = /((?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,12})/gm;
var email = $("#email").val();
var pword = $("#password").val();
if(!pword.match(passwordStrengthRegex) && pword.length != 0){
$('#failAlert').html("<center>Password Rules: 6-12 Characters & At Least 1 Uppercase, 1 Lowercase, 1 Number.</center>");
hideShowAlert($('#failAlert'));
}
else if (email.length != 0 && pword.length != 0) {
var data = {
email: email,
password: pword
};
$.ajax({
type: "POST",
data: JSON.stringify(data),
url: "https://www.geobus.co.uk/api/v1/login",
success: function (data) {
if (data.error == false) {
sessionStorage.user = data.user;
sessionStorage.token = data.token;
$.mobile.pageContainer.pagecontainer("change", "home.html");
//$.mobile.changePage("home.html"); //,{reloadPage: true});
} else if (data.error == true) {
$('#failAlert').html("<center>Invalid Login Credentials!</center>");
hideShowAlert($('#failAlert'));
}
},
error: function (data) {
$('#failAlert').html("<center>Whoops Something Has Gone Wrong!</center>");
}
});
return false;
}
});
home.html的
<body>
<div data-role="page" id="home">
<div data-role="panel" id="menu" data-swipe-close="true" data-display="overlay">
<ul class="nav navbar-nav" id="slideMenu">
<center>
<label class="menuLabel">Swipe to Close</label><span id="slideGlyph" class="glyphicon glyphicon-chevron-left"></span></center>
<li><a href="#home" class="menuOption">Home</a></li>
<li><a href="#" class="menuOption">Track</a></li>
<li><a href="#" class="menuOption">Timetables</a></li>
<li><a href="#routes" class="menuOption">Routes</a></li>
<li><a href="index.html" class="menuOption">Log Out</a></li>
</ul>
</div>
<div data-role="header" class="ui-header">
<a href="#menu" class="navbar-toggle" role="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<img src="../images/logo.png" id="logo" alt="GeoBus Logo">
</div>
<div data-role="main" class="ui-content">
<div class="alert alert-success" id="successAlert">
Successfull Login!
</div>
<div id="map"></div>
<script>
map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var userIcon = L.icon({
iconUrl: '../images/userMapPin.png',
iconSize: [38, 85],
iconAnchor: [22, 94]
});
map.locate({
setView: true,
maxZoom: 18,
enableHighAccuracy: true
});
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng, {
icon: userIcon
}).addTo(map)
.bindPopup("You are within " + radius + " meters of this point.").openPop$
}
function onLocationError(e) {
alert(e.message);
}
</script>
</div>
</div>
</body>
</html>
很抱歉，我尽可能地缩短了代码。我确实将home.html中的脚本标记代码分离到了它自己的文件中，但我仍然需要刷新。有谁知道我的问题在哪里？我失去了理智。任何帮助将不胜感激。
答案 0 :(得分：1)
我有这个：
<div data-role="main" class="ui-content">
<div id="map"></div>
</div>
这是修复。
<div id="map" data-role="main" class="ui-content">
感谢奥马尔的帮助。