Halt!
Ich kann das mit dem EndMarker doch nicht übergehen, ich brauche am Ende der Route auch noch ein Marker, jedoch werden beide Marker fehlerhaft dargestellt wenn ich einen zweiten Marker Layer hinzufügen sowie weiß ich nicht was ich da anstelle von “StartPoint” schreiben soll, EndPoint und StopPoint funktionieren nicht. Ich hab mal meine “OpenLayers.html” drangehängt:
<html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="img_js_css/style.css" type="text/css" />
<style type="text/css">
.olImageLoadError {
background-image: url('img_js_css/img/tile-not-found.png');
background-repeat: no-repeat;
}
</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="img_js_css/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="img_js_css/OpenStreetMap.js"></script>
<script type="text/javascript">
// Wenn unter diesem Kommentar
// alert(OpenLayers.VERSION_NUMBER);
// steht, wird bei jedem Start von OpenLayers die
// Version angezeigt.
// Start Koordinaten für die Karte
var lat=50.01;
var lon=10.99;
var zoom=3;
var map; //Komplexes Objekt vom Typ OpenLayers.Map
//Initalisieren von "map"
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine({geodesic: true}),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0339,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
// Layer hinzufügen:
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarker_1 = new OpenLayers.Layer.Markers("Show route start point");
map.addLayer(layerMarker_1);
// *********************************************************************
// Block "Layer mit GPX-Track" - Start
var GPXVariable_1 = new OpenLayers.Layer.Vector("Show route", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "route/route.gpx",
format: new OpenLayers.Format.GPX()
}),
style: {strokeColor: "purple", strokeWidth: 5, strokeOpacity: 1.0},
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(GPXVariable_1);
// Als Position des ersten Markers, den Startpunkt der Route angeben:
GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
this.map.zoomToExtent(this.getDataExtent());
var startPoint = this.features[0].geometry.components[0];
layerMarker_1.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
});
// Block "Layer mit GPX-Track" - Ende
// *********************************************************************
//Layer der die loakeln Tiles lädt
var newLayer = new OpenLayers.Layer.OSM("Use downloaded map data", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 20, alpha: true, isBaseLayer: false});
map.addLayer(newLayer);
// Ende des "Local Tile" Layer
var switcherControl = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcherControl);
switcherControl.maximizeControl();
if( ! map.getCenter() ){
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
// Marker Start Point Einstellungen Anfang
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('img_js_css/img/marker-start.png',size,offset);
layerMarker_1.addMarker(new OpenLayers.Marker(lonLat,icon));
// Marker Start Point Einstellungen Ende
}
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>
PS: Hier ein Screenshot, damit ihr wisst was ich meine
http://www.david-guillot.tk/1.png