这是我的完整观点:
@{
ViewBag.Title = "Home";
}
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
</script>但是当我什么都不做的时候我就看不到地图了。
我在记事本中创建了一个HTML页面,如下所示:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>而且它是有效的。
为什么没有在ASP.NET中执行代码?
我从NuGet安装了NuGet,如果我选择OpenLayers并按F12 (“转到定义”,它会打开OpenLayers.js,因此它似乎已经正确下载了)。
编辑:完整生成的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FIKA - Home</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link href="/Content/css?v=bxomq82-FU9mU3eDX6m-kca-a2PFEz0RK2Z7mS-QmnY1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
</head>
<body>
<div class="container body-content">
<div style="width:100%; height:100%" id="map"></div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
<hr />
</div>
<script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>
<script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"0ea737fab0f240fab62a7978c5db4fa7"}
</script>
<script type="text/javascript" src="http://localhost:60314/4457514eae394a96a55c4c6c386b7942/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>发布于 2015-09-05 15:00:48
出现问题是因为在完整生成的代码中,您有一个HTML5文档类型,在您的工作演示中,您没有一个doctype。浏览器以不同的方式呈现height:100%;属性时会出现这种差异。
在执行代码之前,需要设置以像素为单位的高度。
function setMapHeight() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
document.getElementById('map').style.height = (w.innerHeight || e.clientHeight || g.clientHeight) + 'px';
}
setMapHeight();
window.onresize = setMapHeight; // Add this code to fix height if window resizes
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();https://stackoverflow.com/questions/32413001
复制相似问题