.map 未显示在浏览器中

Question

我看到有些人遇到了类似的问题，但仍然无法弄清楚我的代码有什么问题。

Shapefile 已上传到 GeoServer，但地图未显示在网页中。我猜代码有一些非常基本的错误，但我看不出是什么。文档中的URL绝对正确。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>OpenLayers map preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
display: none;
}
/* The map and the location bar */
#map {
clear: both;
position: relative;
width: 337px;
height: 512px;
border: 2px solid black;
}            
#wrapper {
width: 337px;
height: 50px;                           
}            
#location {
float: right;
font-family: Arial, Verdana, sans-serif; 
font-size: 12px; 
color: #483D8B;
background-color: white;
}            
#scale {
float:left;
font-family: Arial, Verdana, sans-serif; 
font-size: 12px; 
color: #483D8B;
background-color: white;
}
#nodelist{
font-family: Arial, Verdana, sans-serif; 
font-size: 14px; 
color: #000000;
font-style: normal;
background-color: white;
}
</style>

<script type="text/javascript" src="http://www.openlayers.org/dev/OpenLayers.js"></script>      

<script defer="defer" type="text/javascript">
var map;
var untiled;
var tiled;
var pureCoverage = false;
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

function init(){

format = 'image/png';
var bounds = new OpenLayers.Bounds(
// modify parameters
984018.1663741902,207673.09513056703,
991906.4970533887,219622.53973435296
);

var options = {
controls: [],
maxExtent: bounds,
//modify parameter
maxResolution: 46.67751798353879,
//modify parameter
projection: "EPSG:2908",
//setting zoom levels
numZoomLevels:6,
units: 'm'


};
map = new OpenLayers.Map('map', options);

tiled = new OpenLayers.Layer.WMS(
"wsNYCRoads:nyc_roads - Tiled", "http://localhost:8080/geoserver/wsNYCRoads/wms",
{

 height: '358',
 width: '512',
layers: 'wsNYCRoads:nyc_roads',
styles: '',
srs: 'EPSG:2908',
format: format,
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true
} 
);  



map.addLayer(tiled);                
map.zoomToExtent(bounds);
}
</script>
</head>     
<body onload="init()">
Map viewer using Geoserver and MapLayers
<br><br>


<div id="map">
</div>
<br>
<div id="wrapper">
<div id="location">location</div>
<br>
<div id="scale">
</div>
</div>

<br>
<div id="nodelist" >
--> Click on the map to get feature info
</div>
</body>
</html>

Answer 1

您的脚本 link 不再有效。如果将其放入浏览器，则会出现 404 错误。将其替换为以下内容：

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

有时最好只下载本地副本并引用它，这样网络上的目录更改就不会导致加载问题。

.map 未显示在浏览器中

.map not displayed in the browser

geoserver

web