Hallo,
Ich stelle einige Marker die auch Cluster sein können auf einer Karte dar. Wenn man auf einen Marker klickt erscheint ein Popup mit einigen Informationen zu dem Punkt oder die Überschriften mehrerer Punkte bei einem Cluster. Das Popup verschiebe ich dann noch per CSS damit es zentriert über dem Marker steht Soweit funktioniert schonmal alles sehr gut.
Wenn ich nun aber ein Popup auf mache und danach zoome wird das Popup wieder mit der oberen linken Ecke an den Punkt geheftet und der schließen Button funktioniert nicht mehr. Die neue Position bekomme ich vermutlich über CSS wieder hin, aber ich wollte mal fragen ob es da noch einen besseren Weg gibt. Bei dem Probelm mit dem schließen bekomme ich die Fehlermeldung, dass “evt” undefined ist mit Verweis auf die Zeile “if (event.layer == null && evt != null) {” die in “popup.addCloseBox(function(b) {” ausgeführt wird. Weiß jemand was mein Problem verursacht? Wenn ich das Verhalten richtig interpretiere, geht beim Zoomen das event verloren, aber warum?
Hier mal der entsprechende Code dazu:
selectControl = new OpenLayers.Control.SelectFeature(
clubs, {
onSelect : function(event) {
that.evt = event.layer;
if (event.cluster === 0) { return; }
var features = event.cluster;
text = '<div class="popupcontent">';
var length = features.length;
if (length > 5) {
length = 5;
}
if (length > 1) {
for(var i=0, len = length; i<len; ++i) {
var feature = features[i].attributes;
text += '<div><b><a class="zoom-to-location" href="#" onclick="joy.zoomToFeature('+feature.lon+', '+feature.lat+', true, '+feature.id+', \''+feature.title+'\'s, \''+feature.bild+'\', {city: \''+feature.adress.city+'\', zip: \''+feature.adress.zip+'\', street: \''+feature.adress.street+'\', country: \''+feature.adress.country+'\'});">'+feature.title+'</a></b></div>';
}
var tmp = features.length - length;
if (tmp == 1) {
text += '<br /><b>und '+(tmp)+' weiterer Eintrag</b>';
}
else if (tmp > 1) {
text += '<br /><b>und '+(tmp)+' weitere Einträge</b>';
}
}
else {
var feature = features[0].attributes;
text += '<img src="'+feature.bild+'" alt="" width="60px" height="60px" style="float: left; padding: 1px; border: 1px solid #cccccc; margin: 1px 4px 2px 1px;"/><span style="font-weight:bold;font-size: 16px;">';
text += feature.title + '</span><div style="margin-left:70px;"></div>';
}
text += '</div>';
popup = new OpenLayers.Popup("feature",
event.geometry.getBounds().getCenterLonLat(),
null,
text,
event.marker,
true,
function(b) {
if (event.layer == null && evt != null) {
event.layer = evt;
evt = null;
}
selectControl.unselect(event);
});
popup.setBackgroundColor("transparent");
popup.addCloseBox(function(b) {
if (event.layer == null && evt != null) {
event.layer = evt;
evt = null;
}
selectControl.unselect(event);
});
event.popup = popup;
this.map.addPopup(popup);
popup.updateSize();
$('.olPopup').css('height', '');
$('.olPopupContent').css('height', '');
$('.olPopup').append('<div style="height: 16px; margin: 0 auto; overflow: hidden; position: relative; width: 40px;"><div style="background: none repeat scroll 0 0 white; border:solid 1px #999999; -moz-transform: rotate(45deg); height: 15px; margin: -8px auto 0; padding: 1px; width: 15px;"></div></div>');
$('.olPopup').css({
'top' : $('.olPopup').position().top - $('.olPopup').height() - 36,
'left' : $('.olPopup').position().left - $('.olPopup').width()/2 + 1
});
popup.panIntoView();
that.event = event;
},
onUnselect : function(event) {
this.map.removePopup(event.popup);
event.popup.destroy();
event.popup = null;
that.event = null;
}
});
this.map.addControl(selectControl);
selectControl.activate();
// Landesgrenzen deutlicher zeigen, wenn weit raus gezoomt wird
this.map.events.on({"zoomend": function (e) {
if (this.getZoom() < 6) {
boundary.setVisibility(true);
}
else {
boundary.setVisibility(false);
}
}
});