作为一个项目，我正在建立一个网站，根据位置列出水手的信息。页面上的第一项是开放海图（http://wiki.openseamap.org/wiki/OpenSeaMap_in_Website）
的摘录我的问题是改变lat和lon值，它在开始时给出一个值，该值返回德国Rostok港口的起点。任何时候我试图改变这些值（使用html 5地理定位函数）我都返回了一个错误，否则坐标默认为非洲的atlas浮标。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>OpenSeaMap</title>
<style type="text/css">
.olImageLoadError {
display: none !important;
}
</style>
<!-- bring in the OpenLayers javascript library
(here we bring it from the remote site, but you could
easily serve up this javascript yourself) -->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up
to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script>
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script>
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script>
<script type="text/javascript">
var map;
var layer_mapnik;
var layer_tah;
var layer_seamark;
var marker;
// Position and zoomlevel of the map
var lon = 12.0915; //THESE are the values im having trouble changing
var lat = 54.1878;
var zoom = 15;
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";
var linkTextWeatherHarbour = "Meteogramm";
var language = 'de';
function jumpTo(lon, lat, zoom) {
var x = Lon2Merc(lon);
var y = Lat2Merc(lat);
map.setCenter(new OpenLayers.LonLat(x, y), zoom);
return false;
}
function Lon2Merc(lon) {
return 20037508.34 * lon / 180;
}
function Lat2Merc(lat) {
var PI = 3.14159265358979323846;
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
return 20037508.34 * lat / 180;
}
function addMarker(layer, lon, lat, popupContentHTML) {
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
var feature = new OpenLayers.Feature(layer, ll);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = "hidden";
marker = new OpenLayers.Marker(ll);
marker.feature = feature;
var markerClick = function(evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
layer.addMarker(marker);
map.addPopup(feature.createPopup(feature.closeBox));
}
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return null;
} else {
x = ((x % limit) + limit) % limit;
url = this.url;
path= z + "/" + x + "/" + y + "." + this.type;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url+path;
}
}
function drawmap() {
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
eventListeners: {
"moveend": mapEventMove,
//"zoomend": mapEventZoom
},
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.PanZoomBar()],
maxExtent:
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
numZoomLevels: 18,
maxResolution: 156543,
units: 'meters'
});
// Add Layers to map-------------------------------------------------------------------------------------------------------
// Mapnik
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
// Seamark
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});
// Harbours
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});
layer_pois.setOpacity(0.8);
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);
jumpTo(lon, lat, zoom);
// Update harbour layer
refreshHarbours();
}
// Map event listener moved
function mapEventMove(event) {
// Update harbour layer
refreshHarbours();
}
</script>
任何关于如何生成坐标并将它们插入这些lat和lon值的帮助都会非常感激，因为我无法理解为什么我尝试过的任何方法都无效。