我目前正在尝试使用ASP.NET构建一个网站。在我的一个页面上，我需要显示一个将覆盖并填充它的地图。但是，我无法在我的.aspx文件上显示地图。我正在使用免费版Visual Studio 2017 RC编写网站，并使用内置的IIS调试器在我构建它时预览网站。我正在使用OpenLayers来制作我的地图。我设法让地图显示在空的HTML文档中，但在我的.aspx文件中使用相同的地图代码则不会显示。
What the Map.aspx file results in Windows徽标只是一个温度，直到我成为我的
以下是我的Map.aspx文件中的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="pages_map_Map" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Civil Wars: Age of Rebellion</title>
<link href="../../css/bootstrap.min.css" rel="stylesheet" />
<link href="../../css/Map.css" type="text/css" rel="stylesheet" />
<!--<link href="../css/Login.css" type="text/css" rel="stylesheet" />-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div>
<!--Start Navbar-->
<div id="navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Home.aspx" ><img id="logo" alt="Civil Wars: Age of Rebellion" src="../../images/tempLogo.png" height="30" />Civil Wars: Age of Rebellion</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<asp:LinkButton ID="home" runat="server" PostBackUrl="Home.aspx">Home</asp:LinkButton>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Places<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Companies</a></li>
<li><a href="#">Training Center</a></li>
<li><a href="#">Inventory</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Market<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Exchange</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Company</a></li>
</ul>
</li>
<li>
<asp:LinkButton ID="battles" runat="server" PostBackUrl="#">Battles</asp:LinkButton>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Community<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">My Country</a></li>
<li><a href="#">Military Unit</a></li>
<li><a href="#">Newspaper</a></li>
<li><a href="#">Party</a></li>
<li class="active"><a href="Map.aspx">World Map</a></li>
</ul>
</li>
<li>
<asp:Button ID="logOut" runat="server" Text="Logout" />
</li>
</ul>
</div>
</div>
</div>
<!--End Navbar-->
</div>
<!--Start Content-->
<div id="main" class="container center-page">
<h1>Map</h1>
<hr />
<!--Start Map-->
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target = 'map',
maxResolution: 1000,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: [
new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 4
})
]
});
</script>
<!--End Map-->
</div>
<!--End Content-->
<!--- Footer -->
<hr />
<footer>
<div class="container">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2017 Civil Wars Studio · All Rights Reserved · <a href="../Home.aspx">Home</a> · <a href="#">Changelog</a> · <a href="#">Terms of Service</a> · <a href="#">Privacy Policy</a> · <a href="#">Contact</a></p>
</div>
</footer>
<!--- Footer -->
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="../../js/bootstrap.min.js"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</body>
</html>
如果你想直接跳到地图div和js的位置：
<!--Start Content-->
<div id="main" class="container center-page">
<h1>Map</h1>
<hr />
<!--Start Map-->
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target = 'map',
maxResolution: 1000,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: [
new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 4
})
]
});
</script>
<!--End Map-->
</div>
<!--End Content-->
以下是我的Map.css文件中的代码：
#navbar {
height: 70px;
}
body {
background-image: url(../../images/tempBackground.jpg);
background-repeat: no-repeat;
}
hr {
color: black;
background-color: black;
height: 1px;
border: 0 solid;
}
#form1 {
width: 95%;
margin-top: 90px;
margin-left: auto;
margin-right: auto;
}
#home {
margin-top: 15px;
}
#logo {
display: block;
margin: 0 auto;
}
.dropdown {
margin-top: 15px;
}
#battles {
margin-top: 15px;
}
#logOut {
margin-top: 25px;
}
#main {
background-color: whitesmoke;
height: 60% inherit;
width: 75%;
padding-bottom: 20px;
}
#map {
height: 400px;
width: 400px;
margin: 0 auto;
}
任何有关我的OpenLayers地图无法显示的帮助将不胜感激！感谢。