OpenStreetMaps

Blume

Hallo,
ich bin neu hier, hoffe aber das ihr so nett seid und mir etwas unter die Arme greifen könnt. (Bin auch gar nicht so schwer. :P)

Also ich versuche gerade auf einer OpenStreetMaps Karte ein paar Marker zu setzen, die ich dann auf meiner Webseite einbinden möchte.

Ich habe mir ein paar unterschiedliche Methoden dazu angesehen, bekomme es aber nicht hin, dass mir mehrere Marker angezeigt werden. - Bin echt ratlos.

Ich poste einfach mal den Code... Stellt ruhig alle Fragen zum Code die ihr habt.

HTML-Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-de">
<head>
<title>Map | Testanwendung</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta name="author" content="Thomas Heiles" />
<link rel="stylesheet" type="text/css" href="map.css"></link>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_map.css"></link>
<![endif]-->
<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>
<script type="text/javascript" src="tom.js"></script>
 
<script type="text/javascript">
//<![CDATA[


var map;
var layer_mapnik;
var layer_tah;
//var layer_markers;


function drawmap() {
    // Popup und Popuptext mit evtl. Grafik
    var popuptext_haupt='<font color=\'black\'><b>Das ist die Nr.1 <br>Musterstr. 2<br> 25524 Irgendwas</b><p><img src=\'bild.jpg\' width=\'210\' height=\'113\'></p><a href='www.link.de'>www.link.net</a></font>';
	var popuptext_borgentreich='<font color=\'black\'><b>CONZEDRUCK GmbH<br>Neutorstr. 3<br> 34434 Borgentreich</b><p><img src=\'bild.jpg\' width=\'210\' height=\'113\'></p><a href='http://www.conzedruck.de'>www.conzedruck.de</a></font>';




    OpenLayers.Lang.setCode('de');

    // Position und Zoomstufe der Karte
    var lon = 9.485322;
    var lat = 53.958883;
    var zoom = 8;


    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection('EPSG:900913'),
        displayProjection: new OpenLayers.Projection('EPSG:4326'),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,
        units: 'meters'
    });


    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    map.addLayer(layer_mapnik);

    var layerMarkers = new OpenLayers.Layer.Markers("Standorte");
	map.addLayer(layerMarkers);

	var layerParks = new OpenLayers.Layer.Markers("Windparks");
	map.addLayer(layerParks);


    jumpTo(lon, lat, zoom);

    var size = new OpenLayers.Size(21, 25);
	var sizeHaupt= new OpenLayers.Size(26, 42);
	var sizeWind= new OpenLayers.Size(73, 64);
	var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
	var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
	var iconHaupt = new OpenLayers.Icon('thron.png',sizeHaupt,offset);
	var iconWind = new OpenLayers.Icon('wind-orange.png',sizeWind,offset);



 
    // Position des Markers   .... Marker wird über Funktion 'addMarker()' in tom.js eingebunden....
	addMarker(layerMarkers, 9.484227, 53.959731, popuptext_haupt, iconWind);


	addMarker(layerMarkers, 9.238515, 51.570028, popuptext_borgentreich, iconHaupt);






// ----- Andere Möglichkeit Marker einzubinden, allerdings dann ohne Popup-Fenster ---------
/*
	//Standorte
		var lonLatHaupt = new OpenLayers.LonLat(9.485322, 53.958883).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		layerMarkers.addMarker(new OpenLayers.Marker(lonLatHaupt,iconHaupt));

		var lonLat2 = new OpenLayers.LonLat(9.238515, 51.570028).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		layerMarkers.addMarker(new OpenLayers.Marker(lonLat2, icon.clone()));


	//Windparks
		var lonLatWind1 = new OpenLayers.LonLat(11.244249, 51.913991).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		layerParks.addMarker(new OpenLayers.Marker(lonLatWind1, iconWind));
*/		



}


//]]>
    </script>


  </head>
  <body onload="drawmap();">


  <div id="header">
  	<div id="content">Karte (Testversion)</div>
   	<div id="osm">? <a href="http://www.openstreetmap.org">OpenStreetMap</a>
    	 und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
     	<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
     </div>
  </div>
  <div id="map">
  </div>

</body>
</html>

Alles anzeigen

JS Code:

Code

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, icon) 
{
 
    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(300, 180) } );
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = "hidden";
 
    var marker = new OpenLayers.Marker(ll, icon);


    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));  

   map.addPopup(feature.closeBox);

}
 
function getCycleTileURL(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;
 
     return this.url + z + "/" + x + "/" + y + "." + this.type;
   }
}

Alles anzeigen

OpenStreetMaps

Tags

Benutzer online in diesem Thema