Brauche Hilfe beim setzen mehrere Marker im Code

nc-93 · 2013-03-13 17:29:45

Hallo Leute,

ich bin ganz neu hier. Ich stehe vor der Aufgabe eine OSM auf einer Webseite einzupflegen. Auf der Karte sollen über verschiedene Layer verschiedene Marker gesetzt werden (z.B. im Layer Service Standorte: 7 Marker, Layer Beratungsbüros: 12 Markern etc.) sodass man die Möglichkeit hat die Layer ein bzw. auszublenden. Zusätzlich sollen die Marker die Popupfunktion haben.

Soweit so gut. Ich habe mich also etwas umgeschaut und verschiedenste Arten von OSM Umsetzungen gefunden. Nun stehe ich aber vor dem Problem, dass ich es nicht schaffe mehrere Marker in einem Layer einzubinden und gleichzeitig die Popup funktion habe und weiß einfach nicht wo ich jemanden finde, der mir weiterhelfen kann.

Bin ich hier an der richtigen Adresse?

Ich bin echt am verzweifeln
Ich hoffe ihr könnt mir sagen warum man die function addMarker() nur einen Marker setzt!

vielen Dank schonmal !

Falls ihr Fragen zum Code habt, schießt los

Ich lasse einfach mal mein Code hier...

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>Firma<br>Kirchhofstr. 3<br> 25524 Irgendwo</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 gesetzt....

	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>

JS 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;
   }
}

EvanE · 2013-03-13 19:24:07

nc-93 wrote:

ich bin ganz neu hier. Ich stehe vor der Aufgabe eine OSM auf einer Webseite einzupflegen. Auf der Karte sollen über verschiedene Layer verschiedene Marker gesetzt werden (...) sodass man die Möglichkeit hat die Layer ein bzw. auszublenden. Zusätzlich sollen die Marker die Popupfunktion haben.
... Nun stehe ich aber vor dem Problem, dass ich es nicht schaffe mehrere Marker in einem Layer einzubinden und gleichzeitig die Popup Funktion habe und weiß einfach nicht wo ich jemanden finde, der mir weiterhelfen kann.
...
Ich hoffe ihr könnt mir sagen warum man die function addMarker() nur einen Marker setzt!
...

Herzlich willkommen bei OSM und im Forum

Warum die Funktion addMarker() nur einen Marker setzt, liegt daran, dass sie genau dafür gemacht wurde.

Ich vermute aber, dass du viel lieber wissen möchtest, mit welcher Funktion du mehrere Marker auf der Karte setzen kannst. Ich bin kein Openlayer Kenner und all meine Kenntnisse sind nur hier im Forum angelesen.
Bis die Spezialisten sich melden, schlage ich vor, in Richtung addVectorLayer (oder so ähnlich) zu suchen.

Edbert (EvanE)

nc-93 · 2013-03-14 09:18:58

EvanE wrote:

Warum die Funktion addMarker() nur einen Marker setzt, liegt daran, dass sie genau dafür gemacht wurde.

kannst du mir das vielleicht erklären warum genau auch beim 2. Aufruf der Funktion nur der erste Marker gesetzt wird?
Ich könnte mir nur vorstellen das in dem Layer vielleicht nur platz für einen Marker ist aber dann würde doch der erste Marker vom 2. überschrieben, - oder nicht?

EvanE wrote:

Ich vermute aber, dass du viel lieber wissen möchtest, mit welcher Funktion du mehrere Marker auf der Karte setzen kannst.
Edbert (EvanE)

Und ja das ist natürlich meine Frage ! Entschuldigt bitte, dass sich das nicht so sehr herauskristallisiert hat. Aber aus lauter Neugier würde ich gerne wissen, warum es mit der Funktion nicht funktioniert - was ein Wortspiel -

EvanE wrote:

Ich bin kein Openlayer Kenner und all meine Kenntnisse sind nur hier im Forum angelesen.
Bis die Spezialisten sich melden, schlage ich vor, in Richtung addVectorLayer (oder so ähnlich) zu suchen.

Okay danke . Gucke ich mir mal an.
Frage trotzdem direkt: wenn ich mit addVerctorLayer() arbeite will, muss ich den Layer dann erst als new vectorLayer anlegen und dem eine Größe geben?

Danke schonmal

TEL0000 · 2013-03-14 12:39:44

Ich hab grad mal in nen alten Code von mir geguckt. Dort habe ich die Marker mit new OpenLayers.Layer.Text eingefügt. Da hatte ich dann eine Datei verlinkt in der die Marker standen.

tunnelbauer · 2013-03-14 13:05:04

Eventuell sagen Beispiele mehr als tausend Worte:

http://harrywood.co.uk/maps/examples/op … opups.html
http://openlayers.org/dev/examples/markers.html

(zweiteres ist genau wie gewünscht mit unterschiedlichen Layers und mehreren Markern...)

TEL0000 · 2013-03-14 13:31:01

Der Fehler liegt in map.addPopup(feature.closeBox);

Dort wird die Ausführung des Codes aufgrund eines Fehlers abgebrochen. Desshalb wird nur der erste Marker gezeigt.

Wenn du stattdessen das auskommentierte map.addPopup(feature.createPopup(feature.closeBox)); benutzt, dann funktionierts.

nc-93 · 2013-03-14 14:22:02

WAAHNSINN !

allerdings habe ich dann das Problem, dass sich auf einen schlag alle Popups öffen . Das habe ich versucht zu vermeiden, indem ich das featuer.createPopup() rausgenommen habe.

Aber hammer, dass das Problem schonmal Geschichte ist!!!

100 Gummipunkte für TEL0000! - wäre ich glaub' nie drauf gekommen.

nc-93 · 2013-03-14 14:26:13

So hat sich auch erledigt - ich sollte glaub' mal n paar stunden mehr schlafen, dass mir solche Fehler nicht mehr passieren

Trotzdem vielen Dank an alle!

Announcement

#1 2013-03-13 17:29:45

Brauche Hilfe beim setzen mehrere Marker im Code

#2 2013-03-13 19:24:07

Re: Brauche Hilfe beim setzen mehrere Marker im Code

#3 2013-03-14 09:18:58

Re: Brauche Hilfe beim setzen mehrere Marker im Code

#4 2013-03-14 12:39:44

Re: Brauche Hilfe beim setzen mehrere Marker im Code

#5 2013-03-14 13:05:04

Re: Brauche Hilfe beim setzen mehrere Marker im Code

#6 2013-03-14 13:31:01

Re: Brauche Hilfe beim setzen mehrere Marker im Code

#7 2013-03-14 14:22:02

Re: Brauche Hilfe beim setzen mehrere Marker im Code

#8 2013-03-14 14:26:13

Re: Brauche Hilfe beim setzen mehrere Marker im Code

Board footer