【发布时间】：2016-03-04 03:45:27
【问题描述】：
我目前正在进行一个项目，偶然发现了一个问题。我有一个名为 index.html 的 HTML 文件，其中包含我的应用程序的基本功能页面（欢迎页面、登录和注册）和另一个名为 home.html 的 HTML 页面，您可以在成功登录后访问该页面，假设显示一张传单地图用户位置。问题是当我成功登录时，除非我刷新页面，否则地图不会显示，这是不可取的。
在过去的几天里，我尝试了将地图 JS 放在第二个 HTML 页面上的各种组合。我已经尝试将代码放在 div 数据角色部分的脚本标签中，但我仍然需要刷新才能看到地图。我知道 JQM 只调用 div 数据角色。代码被调用是因为我被提示允许定位，如果我登录到控制台，JS 被调用但仍然没有地图。
索引.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 中的脚本标记代码分离到它自己的文件中，但我仍然需要刷新。有人知道我的问题出在哪里吗？我正在失去理智。任何帮助将不胜感激。
【问题讨论】：
-
在
pagecontainershow事件中包装地图代码。 -
嗨@Omar，谢谢你的建议，我刚刚试过了。还是没有变化。如果 home.html 是显示的第一页，它会使地图显示，但是当我使用 '$.mobile.pageContainer.pagecontainer("change", "home.html");' 导航到它时从 index.js，我仍然需要刷新页面来加载地图
-
你能在 plnkr.co 上重现这个问题吗？
-
@Omar 我试图在 plunkr 上安装它，但它不起作用。当我在 plunkr 上单击登录时，我不断收到 400 错误。
-
创建一个静态示例，不一定要连接到您的服务器。只是两个简单的页面，下一页上有地图。
标签： javascript jquery html jquery-mobile leaflet