Hi,
da ich eine transparente Markierung für meine Karte einbauen möchte, habe ich mich mal auf der Seite von Netzwolf umgesehen. Unter http://www.netzwolf.info/kartografie/openlayers/mapimage.htm fand ich ein Beispiel, welches ich abgewandelt habe. Der Script
<html>
<title>Overlay aus Bild-Datei - angezeigt auf der karte von OpenStreetMap</title>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<!----------------------------------------------------------------------
Die anonyme Onload-Function baut das Kartenobjekt aus Komponenten zusammen.
Zwischen den mit "***" markierten Bereich tragen Sie die Daten *Ihrer* Bild-Datei ein
----------------------------------------------------------------------->
<script type="text/javascript">
//*******************************************************************
var configName = "Raster";
var configLeft = 7/3;
var configRight = 8.5/2.2;
var configBottom = 48;
var configTop = 49;
var configUrl = "symbole/kreis2.png";
var configWidth = 200;
var configHeight = 200;
//*******************************************************************
var map;
if (!document.onLoadFunctions) {
document.onLoadFunctions = new Array();
window.onload = function () { for (var i=0; document.onLoadFunctions.length>i;i++) document.onLoadFunctions[i](); }
}
document.onLoadFunctions.push ( function () {
//----------------------------------------------------------------------------
// Karte - der Name ("map") muss mit der id des <div> uebereinstimmen.
//----------------------------------------------------------------------------
map = new OpenLayers.Map ("map", {controls:[]});
//----------------------------------------------------------------------------
// Default-Koordinatensystem fuer alle Controls
//----------------------------------------------------------------------------
map.displayProjection = new OpenLayers.Projection("EPSG:4326");
//----------------------------------------------------------------------------
// Steuerelemente
//----------------------------------------------------------------------------
map.addControl (new OpenLayers.Control.LayerSwitcher());
map.addControl (new OpenLayers.Control.MousePosition());
map.addControl (new OpenLayers.Control.Navigation());
map.addControl (new OpenLayers.Control.PanZoomBar());
map.addControl (new OpenLayers.Control.Permalink());
//----------------------------------------------------------------------------
// Kartenlayer
//----------------------------------------------------------------------------
map.addLayer (new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
map.addLayer (new OpenLayers.Layer.OSM.CycleMap("CycleMap"));
//----------------------------------------------------------------------------
// Zusatzlayer
//----------------------------------------------------------------------------
var bounds = new OpenLayers.Bounds (configLeft, configBottom, configRight, configTop).
transform(map.displayProjection, map.getProjectionObject());
map.addLayer (new OpenLayers.Layer.Image (configName, configUrl, bounds,
{w: configWidth, h: configHeight},
{isBaseLayer: false, alwaysInRange: true, opacity: 0.15 }
));
//----------------------------------------------------------------------------
// Zentriere Karte
//----------------------------------------------------------------------------
map.zoomToExtent(bounds);
});
//-->
</script>
<style type="text/css">
#map {
background: gray;
height: 80%;
width: 100%;
}
</style>
</head>
<body>
<h1>Overlay aus Bild-Datei</h1>
<div id="map"></div>
<p>
Erklaerung im Quelltext der Seite.
</p>
</body>
</html>
zeigt einen roten Kreis, der sich auch dem Zoom anpaßt. Jetzt wollte ich dasselbe in meinen Script einbauen. Jedoch wird der rote Kreis nicht dargestellt. Leider kenne ich mich auch nicht gut mit javascript aus. Wißt Ihr, wo das Problem liegt. Ich möchte später mal einen Kreis generieren, der einen Bereich von 3 KM abdeckt. Hier der Script. Vielen Dank im voraus 
<script type="text/javascript">
var configName = "Raster";
var configLeft = 7/3;
var configRight = 8.5/2.2;
var configBottom = 48;
var configTop = 49;
var configUrl = "symbole/kreis2.png";
var configWidth = 200;
var configHeight = 200;
var map;
function showMap()
{
map = new OpenLayers.Map("map",
{
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
units: "m",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [],
minZoom:12,
maxZoom:18
});
map.addControl (new OpenLayers.Control.LayerSwitcher());
map.addControl (new OpenLayers.Control.Attribution());
map.addControl (new OpenLayers.Control.Navigation());
map.addControl (new OpenLayers.Control.PanZoomBar({minZoom: 12}));
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
var bounds = new OpenLayers.Bounds (configLeft, configBottom, configRight, configTop).
transform(map.displayProjection, map.getProjectionObject());
map.addLayers([layerMapnik]);
map.addLayer (new OpenLayers.Layer.PopupMarker("Objekte", {
createHtmlFromData: function (data) {
return ;
},
createTooltipFromData: function (data) {
return this.html(data.name);
},
maxTooltipWidth: 220,
createIconFromData: function (data) {
return new OpenLayers.Icon (data.icon, {w: data.abmessung.split(',')[0], h: data.abmessung.split(',')[1]});
},
location: "./<?php echo $file;?>"
} ));
map.addLayer (new OpenLayers.Layer.Image (configName, configUrl, bounds,
{w: configWidth, h: configHeight},
{isBaseLayer: false, alwaysInRange: true, opacity: 0.15 }
));
map.zoomToExtent(bounds);
map.setCenter(new OpenLayers.LonLat(<?php echo $long; ?>,<?php echo $lat; ?>).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 14);
marker.events.register("mousedown", marker, function(evt)
{
OpenLayers.Event.stop(evt);
}
);
map.layers[map.layers.length-1];
}
showMap();
</script>
