Königsdisziplin: Marker mit Popup
Leider ist mir bisher keine schlaue Idee gekommen, im Sinne der objektorientierten Programmierung eine Klasse zu entwickeln, die aus den bisher verwendeten Markern hervorgeht. Bei der Entwicklung von Markern mit Popup-Funktion habe ich – nach langer und umfangreicher Webrecherche – ein Gerüst zusammengeschustert, mit dem sich diese netten, interaktiven Landkartenelemente herstellen lassen.
Die Idee besteht darin, dass man einen Vektorlayer in OL erstellt, zu dessen Eigenschaften man jeweils einen solchen Popup-Marker erzeugt. Wichtig ist außerdem, dass man für die notwendige Interaktion sorgt: in der Regel geschieht dies durch Klicken mit der Maus. Auch das muss man vorsehen.
function erstelle_PopupMarker(einLaengengrad, einBreitengrad, einText, einBild, dieBildhoehe, dieBildbreite, xVersatz, yVersatz) { feature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(einLaengengrad, einBreitengrad ).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), {description: einText} , {externalGraphic: einBild, graphicHeight: dieBildhoehe, graphicWidth: dieBildbreite, graphicXOffset: -xVersatz, graphicYOffset: -yVersatz} ); return feature } function createPopup(feature) { feature.popup = new OpenLayers.Popup.FramedCloud("pop", feature.geometry.getBounds().getCenterLonLat(), null, '<div class="markerContent">'+feature.attributes.description+'</div>', null, true, function() { controls['selector'].unselectAll(); } ); feature.popup.closeOnMove = true; map.addPopup(feature.popup); } function destroyPopup(feature) { feature.popup.destroy(); feature.popup = null; }
Die Würze bekommt das Ganze dadurch, dass man dem Vectorlayer, auf dem die Popup-Marker erzeugt werden sollen, als Eigenschaft die entsprechenden Mausfunktionen hinzufügt. Das geht so:
var controls = { selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })};
Eine Beispieldatei kann man sich hier zum besseren Verständnis herunterladen, die Kartentools gibt es hier.