sid61
Mitglied
Hallo,
bei meinem Versuch, meine Sitemap zu erweitern, bin ich auf ein neues Problem gestoßen, was ich irgendwie nicht in den Griff bekomme.
Ich benutze eine ähnliche Routine zum Clustern der Marker einem Beispiel folgend (Serverside Clustering) von (PHP&GMAPS) von UWmike (was aber mehr den hier nicht veröffentlichten Teil des Clusterns betrifft). Das Clustern selber ist hierbei auch nicht mein Problem, sondern mehr die Tatsache, das es nun eben eine dynamische Darstellung ist, die nicht wie bei anderen Beispielen - statisch - ist. Durch das Clustern wird jedesmal die Map neu aufgebaut, sobald sich die Koordinaten des dargestellten Sichtbereiches verändern.
Diese Routine habe ich erfolgreich an meine Wünsche anpassen können und nunmehr habe ich noch eine Sitemap eingebaut, welche mir die Links der aufgeführten Marker anzeigt. Soweit funktioniert es und die Links werden korrekt eingetragen.
Das Beispiel dem ich gefolgt bin, beschäftigt sich aber bei der Sidebar mit einer statischen Map, bei der die Marker vor dem Laden der Seite feststehen und sich nicht mehr verändern.
Bei mir ist es aber so, das die Marker unter bestimmten (einstellbaren) Bedingungen eben zu Cluster werden. Auch die werden mir korrekt in der Sidebar angezeigt.
Wenn ich nun auf der Map einen Cluster oder einen Marker anklicke, dann wird er mir auch korrekt gelb hinterlegt (markiert). Aber die Markierung wird nicht gelöscht, wenn ich einen anderen Marker anklicke - er markiert dann einfach den nächsten Marker.
Mit Glog wird mir eigentlich alles richtig angezeigt, so das ich nur vermute - das innerhalb der Routine was geändert werden muss, damit die Sidebar bei Veränderung komplett neu aufgelegt wird und die Inhalte zurückgesetzt werden (array). Soweit mein ich es kapiere, durchläuft beim Neuaufbau aber diese Routine jedesmal den Punkt, an dem die Werte der Sidebar neutral gesetzt werden (initialisierung)
Szenario...
wenn ich nun die Map verschiebe oder einen Cluster Marker zoome, dann wird der alte Eintrag in der Sidemap nicht gelöscht, sondern nur die gleichen, bzw. neuen Marker erneut unten in der Liste angefügt. Der alte Inhalt wird nicht gelöscht.
Die Markierung des Markers wird beim anklicken eines anderen Markers nicht gelöscht, sondern der neue Marker wir nur zusätzlich markiert.
Die Klickroutine von der Sidebar reagiert überhaupt nicht und zeigt mir nicht den betreffenden Marker, obwohl der Link und die Linkadresse zum Marker korrekt gesetzt wird.
Hier ist meine map_functions.js, mit der ich diese Vorgänge steuere...
Was mache ich falsch
Kann mir jemand was dazu sagen
Liebe Grüße
Sven
bei meinem Versuch, meine Sitemap zu erweitern, bin ich auf ein neues Problem gestoßen, was ich irgendwie nicht in den Griff bekomme.
Ich benutze eine ähnliche Routine zum Clustern der Marker einem Beispiel folgend (Serverside Clustering) von (PHP&GMAPS) von UWmike (was aber mehr den hier nicht veröffentlichten Teil des Clusterns betrifft). Das Clustern selber ist hierbei auch nicht mein Problem, sondern mehr die Tatsache, das es nun eben eine dynamische Darstellung ist, die nicht wie bei anderen Beispielen - statisch - ist. Durch das Clustern wird jedesmal die Map neu aufgebaut, sobald sich die Koordinaten des dargestellten Sichtbereiches verändern.
Diese Routine habe ich erfolgreich an meine Wünsche anpassen können und nunmehr habe ich noch eine Sitemap eingebaut, welche mir die Links der aufgeführten Marker anzeigt. Soweit funktioniert es und die Links werden korrekt eingetragen.
Das Beispiel dem ich gefolgt bin, beschäftigt sich aber bei der Sidebar mit einer statischen Map, bei der die Marker vor dem Laden der Seite feststehen und sich nicht mehr verändern.
Bei mir ist es aber so, das die Marker unter bestimmten (einstellbaren) Bedingungen eben zu Cluster werden. Auch die werden mir korrekt in der Sidebar angezeigt.
Wenn ich nun auf der Map einen Cluster oder einen Marker anklicke, dann wird er mir auch korrekt gelb hinterlegt (markiert). Aber die Markierung wird nicht gelöscht, wenn ich einen anderen Marker anklicke - er markiert dann einfach den nächsten Marker.
Mit Glog wird mir eigentlich alles richtig angezeigt, so das ich nur vermute - das innerhalb der Routine was geändert werden muss, damit die Sidebar bei Veränderung komplett neu aufgelegt wird und die Inhalte zurückgesetzt werden (array). Soweit mein ich es kapiere, durchläuft beim Neuaufbau aber diese Routine jedesmal den Punkt, an dem die Werte der Sidebar neutral gesetzt werden (initialisierung)
Szenario...
wenn ich nun die Map verschiebe oder einen Cluster Marker zoome, dann wird der alte Eintrag in der Sidemap nicht gelöscht, sondern nur die gleichen, bzw. neuen Marker erneut unten in der Liste angefügt. Der alte Inhalt wird nicht gelöscht.
Die Markierung des Markers wird beim anklicken eines anderen Markers nicht gelöscht, sondern der neue Marker wir nur zusätzlich markiert.
Die Klickroutine von der Sidebar reagiert überhaupt nicht und zeigt mir nicht den betreffenden Marker, obwohl der Link und die Linkadresse zum Marker korrekt gesetzt wird.
Hier ist meine map_functions.js, mit der ich diese Vorgänge steuere...
Code:
//Werte setzen
var map;
var centerLatitude = 51.49506473014368;
var centerLongitude = 10.37109375;
var startZoom = 6;
//Erstelle Icon für Cluster
var iconCluster = new GIcon();
iconCluster.image = "http://www.tutorials.de/forum/images/cluster.png";
iconCluster.shadow = "http://www.tutorials.de/forum/images/house_trans.png";
iconCluster.iconSize = new GSize(48, 38);
iconCluster.shadowSize = new GSize(47, 37);
iconCluster.iconAnchor = new GPoint(23, 35);
iconCluster.infoWindowAnchor = new GPoint(23, 1);
iconCluster.infoShadowAnchor = new GPoint(26, 13);
//Erstelle Icon Detailmarker
var iconSingle = new GIcon();
iconSingle.image = "http://www.tutorials.de/forum/images/house.png";
iconSingle.shadow = "http://www.tutorials.de/forum/images/house_trans.png";
iconSingle.iconSize = new GSize(20, 20);
iconSingle.shadowSize = new GSize(23, 20);
iconSingle.iconAnchor = new GPoint(13, 25);
iconSingle.infoWindowAnchor = new GPoint(13, 1);
iconSingle.infoShadowAnchor = new GPoint(26, 13);
function windowHeight() {
// Standard browsers (Mozilla, Safari, etc.)
if (self.innerHeight)
return self.innerHeight;
// IE 6
if (document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight;
// IE 5
if (document.body)
return document.body.clientHeight;
// Just in case.
return 0;
}
function handleResize() {
var height = windowHeight() - document.getElementById('toolbar').offsetHeight - 30;
document.getElementById('map').style.height = height + 'px';
document.getElementById('sidebar').style.height = height + 'px';
}
function changeBodyClass(from, to) {
document.body.className = document.body.className.replace(from, to);
return false;
}
//Initialisieren
function init() {
document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('nosidebar', 'sidebar-right'); };
document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'nosidebar'); };
handleResize();
map = new GMap2(document.getElementById("map"));
// zusätzlicher Layer für Markierung auf Karte
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);
crossLayer.getTileUrl = function(tile, zoom) {
return "http://www.tutorials.de/forum/images/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;}
map.addMapType(G_SATELLITE_3D_MAP);
// Erstelle neuen Map Typ
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
var mtTerCross = new GMapType(layerTerCross,
G_PHYSICAL_MAP.getProjection(), "Ter+");
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
var mapControl = new GHierarchicalMapTypeControl();
// Setup Map Typ - und Partnerschaft
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");
// Map Control setzen
map.addControl(mapControl);
//Neuen YSlider setzen (Grafischer Slider)
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
updateMarkers();
// Event setzen
GEvent.addListener(map,'moveend',function() {
updateMarkers();
});
// Hintergrund Hinweis -Lade Daten ect.
document.getElementById("map").style.backgroundImage = "url(images/loading.jpg)";
//alert('Test: Testmarke - Hier bin ich');
}
function updateMarkers() {
//existierende Punkte löschen
map.clearOverlays();
//Filter für Coords setzen
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var getVars = 'ne=' + northEast.toUrlValue()
+ '&sw=' + southWest.toUrlValue()
//TEST - Url loggen für Datentest
//GLog.writeUrl('server.php?'+getVars);
//Geografische Punkte auslesen
var request = GXmlHttp.create();
request.open('GET', 'server.php?'+getVars, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var jscript = request.responseText;
var points;
eval(jscript);
//Jetzt die Werte in geordnete Liste eintragen
for (i in points) {
// Längen und Breitengrad zusammenfassen
var point = new GLatLng(points[i].lat,points[i].lng);
// Variable html Infofenster vorbereiten
var html;
// variable marker mit Dateninhalt vorbereiten
var marker = createMarker(point, html, points[i].lat, points[i].lng, points[i].type, points[i].id, points[i].address, points[i].state, points[i].postcode, points[i].price, points[i].name, points[i].art, points[i].category, points[i].agent, points[i].agentphone, points[i].thumb);
map.addOverlay(marker);
}
}
}
request.send(null);
}
// Variable für Sitebar vorbereiten, die später die Daten der Marker spiegelt.
// Initialisiere und setze auf null
var sidebar_html = "";
// Array für Kopien der Markerinhalte setzen
var gmarkers = [];
var li = 0;
var lastlinkid;
function createMarker(point, html, lat, lng, type, id, address, state, postcode, price, name, art, category,agent, agentphone, thumb) {
//Erstelle verschiedene Marker, je nachdem, ob es ein Cluster ist oder nicht.
if(type=='c') {
// Marker ist ein Cluster, setze Info Fenster Parameter
var html = "<div style='height: 110px; width: 305px; line-height:120%; font-family: verdana; font-size: 10px'>";
html +="<img style='float: left; margin-right: 3px' src='/images/find.png' alt='Ansicht Foto' /><div style='float: right'>";
// O.K. - Jetzt übergeben wir Daten an die Infofelder und organisieren die Ausgabe.
html += "<strong><h1>Cluster Icon</strong></h1>";
html += "<strong>This Cluster have " + name + " Entrys<br>Geocoords: " + lat + "," + lng +" </strong><br /><hr>";
html += "GPoint is: " + map.fromLatLngToDivPixel(point) + ", zoom level is " + map.getZoom() + "<hr>";
// Hier geben wir einen Link vor, der den Cluster soweit zoomt, das die normalen Marker erkennbar sind..
html += "<a href=\"javascript:void(0)\" onclick=\"map.setCenter(new GLatLng(" + lat + "," + lng +"), 9);\">Show Objects</a>";
// jetzt bekommt der Marker sein Icon und einen Titel
var marker = new GMarker(point,{icon:iconCluster, title:"Cluster"});
// Hier wird für jedes Icon eine Link ID gesetzt, um es in der Sidebar richtig abzulegen
var linkid = "link"+li;
// Ereignisüberwachung - zeige mir das Infofenster auf Klick
GEvent.addListener(marker, 'click', function() {
// html nun komplett nach markerHTML übergeben
var markerHTML = html;
// Nun Infofenster für Marker öffnen und definiertes markerHTML anzeigen.
marker.openInfoWindowHtml(markerHTML);
// die linkid in Sidebar markieren
// Problem hier - die alte Linkid wird nicht mehr auf neutralen Hintergrund gesetzt,
// wenn ich einen anderen Marker setze.
document.getElementById(linkid).style.background="#ffff00";
// letzten angeklickten Marker merken
lastlinkid=linkid;
});
// Oder es ist ein normales Icon und kein Clustericon
} else {
// Marker ist kein Cluster, setze Info Fenster Parameter
var html = "<div style='height: 110px; width: 305px; line-height:120%; font-family: verdana; font-size: 10px'>";
html +="<img style='float: left; margin-right: 3px' src='http://meinedomain.eu/components/com_wohnraum24/img/thb/"+ thumb +"' alt='Ansicht Foto' /><div style='float: left'>";
// O.K. - Jetzt übergeben wir Daten an die Infofelder und organisieren die Ausgabe.
html += "<strong>" + name + "</strong><br />";
html += "<HR>";
html += "<strong>Objekt Typ: </strong>" + category +"<br />";
html += "<strong>Price: </strong>" + price + " €uro<br />";
html += "<HR>";
html += address + '<br />';
html += postcode + ' ' + state + '<br /><br />';
html += "<a style='color: #FF9900' target=\"_blank\" href=\"http://meinedomain.eu/index.php?option=com_wohnraum24&task=view&id="+id+"\">[Detail Ansicht]</a>";
// jetzt bekommt der Marker sein Icon und einen Titel
var marker = new GMarker(point,{icon:iconSingle, title:"Icon"});
// Hier wird für jedes Icon eine Link ID gesetzt, um es in der Sidebar richtig abzulegen
var linkid = "link"+li;
// Ereignisüberwachung - zeige mir das Infofenster auf Klick
GEvent.addListener(marker, 'click', function() {
// html nun komplett nach markerHTML übergeben
var markerHTML = html;
// Nun Infofenster für Marker öffnen und definiertes markerHTML anzeigen.
marker.openInfoWindowHtml(markerHTML);
// die linkid in Sidebar markieren
// Problem hier - die alte Linkid wird nicht mehr auf neutralen Hintergrund gesetzt,
// wenn ich einen anderen Marker setze.
document.getElementById(linkid).style.background="#ffff00";
// letzte angeklickte linkid merken
lastlinkid=linkid;
});
}
//Erzeugte marker für sidebar abfertigen
gmarkers[li] = marker;
// Jetzt die Daten zufügen, die in der Sidebar angezeigt werden sollen
// Problem:der Link für myclick wird gesetzt aber reagiert nicht
sidebar_html += '<div id="' + linkid + '"><a href="javascript:myclick(' + li + ')">' + name + '/' + linkid +'</a><br></div>';
// Eintragswert i erhöhen
li++;
//Jetzt wird der erzeugte Eintrag in die Sidebar transportiert
document.getElementById("sidebar").innerHTML = sidebar_html;
//Nochmal ein Test, ob alles ankommt !!
GLog.write(sidebar_html);
// alles klar, dann zurück zum nächsten Marker und alles von vorne..
return marker;
// Alle Marker abgefertigt - Dann raus aus der Schleife
// Meine Problemzone - Normalerweise möchte ich mit dieser Funktion abfragen, welcher Link in der
// Sidbar geklickt wurde. Aber auf Klick in der Sidebar geht nix.
function myclick(li) {
GEvent.trigger(gmarkers[li], "click");
gmarkers[li].openInfoWindowHtml(markerHTML)
}
}
window.onresize = handleResize;
window.onload = init;
Was mache ich falsch
Kann mir jemand was dazu sagen
Liebe Grüße
Sven
Zuletzt bearbeitet: