Nabend,
Ich habe das Problem das beim laden einer Karte auf meiner Webseite die Zeichen für Zoom und Richtung kurz angezeigt werden und dann verschwinden sie wieder.
Hat da jemand eine Ahnung woran das liegen kann?
Hier mein Code:
<script type="text/javascript">
var SHADOW_Z_INDEX = 10;
var MARKER_Z_INDEX = 11;
var DIAMETER = 200;
// Position und Zoomstufe der Karte
var lon = <?php echo $longitude; ?>;
var lat = <?php echo $latitude; ?>;
var map;
var zoom = 16;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
};
map = new OpenLayers.Map('map', options);
var mapnik = new OpenLayers.Layer.TMS(
"Base Layer",
"http://b.tile.openstreetmap.org/",
{
type: 'png', getURL: osm_getTileURL,
displayOutsideMaxExtent: true,
wrapDateLine: true
}
);
layer = new OpenLayers.Layer.Vector(
"Das-Deutschlandnetz",
{
styleMap: new OpenLayers.StyleMap({
// Set the external graphic and background graphic images.
externalGraphic: "http://media.ducktracker.com/img/marker-gold.png",
backgroundGraphic: "http://media.ducktracker.com/img/marker_shadow.png",
// Makes sure the background graphic is placed correctly relative
// to the external graphic.
backgroundXOffset: 0,
backgroundYOffset: -7,
// Set the z-indexes of both graphics to make sure the background
// graphics stay in the background (shadows on top of markers looks
// odd; let's not do that).
graphicZIndex: MARKER_Z_INDEX,
backgroundGraphicZIndex: SHADOW_Z_INDEX,
pointRadius: 12
}),
rendererOptions: {yOrdering: true}
}
);
var centre = new lonLatToMercator(new OpenLayers.LonLat(lon, lat));
//lonLatToMercator(new OpenLayers.LonLat(8.83, 52.016))
function osm_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 OpenLayers.Util.getImagesLocation() + "404.png";
} else {
x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
/*
* Layer style
*/
// we want opaque external graphics and non-opaque internal graphics
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2;
layer_style.graphicOpacity = 1;
//var pointList = new Array();
//var pointimport = [1491681.13396, 6894096.23908];
map.addLayers([mapnik, layer]);
//map.addLayer(mapnik);
map.setCenter(centre, zoom);
// Add a drag feature control to move features around.
controls = { drag: new OpenLayers.Control.DragFeature(layer, {'onComplete': onCompleteMove} )};
map.addControl(controls['drag']);
controls['drag'].activate();
drawFeatures();
}
function onCompleteMove(feature)
{
if(feature)
{
// replace coordinate values in feature attributes
var pointX = feature.geometry.x;
var pointY = feature.geometry.y;
$('[name=geo_lon]').val(pointX);
$('[name=geo_lat]').val(pointY);
}
}
function drawFeatures() {
layer.removeFeatures(layer.features);
// Create features at random around the center.
var center = map.getViewPortPxFromLonLat(map.getCenter());
// Add the ordering features. These are the gold ones that all have the same z-index
// and succomb to y-ordering.
var features = [];
var lonLat = new lonLatToMercator(new OpenLayers.LonLat(lon, lat));
features.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
)
);
layer.addFeatures(features);
}
function lonLatToMercator(ll) {
var lon = ll.lon * 20037508.34 / 180;
var lat = Math.log(Math.tan((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
lat = lat * 20037508.34 / 180;
return new OpenLayers.LonLat(lon, lat);
}
function MercatorToLonLat(ll) {
var lon = ll.lon / 20037508.34 * 180;
// Umrechnung Meter -> rad
var lat = ll.lat / 20037508.34 * 180 * ( Math.PI / 180 );
// Projektion Mercator -> Erdkugel
lat = ( Math.pow(Math.E, lat) - Math.pow(Math.E, -lat) ) / 2; // = Math.sinh(lat)
lat = Math.atan( lat );
// Umrechnung rad -> Grad
lat = lat * 180 / Math.PI;
return new OpenLayers.LonLat(lon, lat);
}
</script>
Danke
Mitch