nicht angemeldet
Hallo,
leider sehe ich offensichtlich den Wald vor lauter Bäumen nicht mehr, daher möchte ich um eure Mithilfe bitten.
Ich versuche derzeit eine scrollende Landkarte ähnlich der Anzeige wie bei Google-Maps bzw. Earth zu realisieren,
d.h. mein bisheriger Denkansatz war so, das ich innerhalb eines absolutem DIVs mit einer festen Größe ein zweites, größeres DIVs positioniere was ich anschließend per JS durch Änderungen der X/Y-Werte (Top/Left) innerhalb des Eltern-DIVs bewege.
Dieses funktioniert auch wie gewünscht.
Die eigentliche Karte habe ich in Blöcken a 100 x 100 px geteilt und lasse dieses entsprechend in das zu bewegende DIV einblenden.
Mein Eltern-DIV hat derzeit die Größe 500 x 300 px (also 15 sichtbare Karten-Blöcke), das Karten-DIV habe ich derzeit in einer Größe von 700 x 500 (also insgesamt 35 Karten-Blöcke) gehalten, positioniert jeweils mit -100px so das ich also jeweils eine Blockreihe noch oben, unten, links und rechts scrollen kann.
Da ich die Karte unendlich (!) halten möchte, möchte ich bei erreichen des Endes des jeweiligen anzeigbaren Karten-Blocks (in der X- oder Y-Achse) via AJAX-Aufruf das Karten-DIV aktualisieren.
Um Kartenelemente beliebig (auch nachträglich) hinzuzufügen, habe ich die einzelnen Kartenblöcke mit X- und Y-Werte im Namen versehen, ausgehend jeweils von 10000 (Kartenmitte, 1. Karte - linke obere Ecke dementsprechend 9998 [H] und 9997 [V]).
Beispiel:
Kartenblock 01 = 10000_10000.jpg
Kartenblock 02 = 9999_10000.jpg
Kartenblock 03 = 10001_10000.jpg
Kartenblock 04 = 10000_10001.jpg
In dem Beispiel liegt Block 02 links neben Block 01, Block 03 rechts neben Block 01 und Block 04 direkt unter Block 01.
Soweit, sogut.
Nun beginnen aber meine Probleme:
a) Irgendwie (und warum auch immer) funktioniert das nachladen bzw. das errechnen der Blocknamen (und damit Positionen) nicht wie erwartet, d.h. mal springt das Teil in den x oder y - Positionen nicht eine Blockbreite sondern zwei...
b) beim Nachladen setzte muß ich das zu bewegende DIV ja wieder auf die Positionen X/Y - 100px setzten, das erzeugt einen sehr unschönen "Hüpf"-Effekt
c) es ist eine schei...-Arbeit die Kartenblöcke dementsprechend zu benennen (aber das ist nicht das wichtigste).
Meine Fragen wären also dementsprechend:
1.) Gibt es vielleicht eine andere, sinnvollerer Lösung (oder gar was funktionierendes fertiges, vielleicht in Flash ???)
2.) Wenn 1=nein; warum funktioniert das nachladen, bzw. die Block-Berechnung nicht wie erwartet...
bzw.:
3.) Ist mein Lösungsansatz ansich korrekt ??
Ich hoffe auf zahlreiche Responses :-)
MfG
Georg
PS:
Hier ein paar Auszüge aus meinem Code (nicht schlagen, ich weiß das der nicht sauber ist) - nur lesen wenns interessiert:
"Grund-"JS ("zustand" habe ich verwendet da die Funktion solange aufgerufen werden soll, wie der User die Maustaste gedrückt hält)
<script language="javascript">
var grundblock_h = 9998;
var grundblock_v = 9997;
function aktumap(wert_h,wert_v) {
// Erzeugt den AJAX-Request / Übergibt die errechneten neuen Grundwerte (Top/Left) und fügt die Response per inner.HTML in das Karten-DIV ein...
}
function moveleft(zustand) {
if(zustand=='2') {
if (window.aktiv) window.clearTimeout(aktiv);
return;
} else {
var posleft = parseInt(document.getElementById('dmap').style.left);
var nleft = posleft - 2;
if(nleft=="-200") {
grundblock_v = grundblock_v + 1;
document.getElementById('dmap').style.display = "none";
aktumap(grundblock_h,grundblock_v);
document.getElementById('dmap').style.left = "-100px";
document.getElementById('dmap').style.display = "block";
} else {
document.getElementById('pixleft').innerHTML = nleft;
document.getElementById('dmap').style.left = nleft + "px";
}
aktiv=setTimeout("moveleft('1')",100);
}
}
function moveright(zustand) {
// Wie moveleft nur das hier als "Schaltwert" 0 verwendet wird und der v-Wert minus 1 gerechnet wird
}
function moveup(zustand) {
if(zustand=='2') {
if (window.aktiv) window.clearTimeout(aktiv);
return;
} else {
var postop = parseInt(document.getElementById('dmap').style.top);
var ntop = postop - 2;
if(ntop=="-200") {
grundblock_h = grundblock_h + 1;
document.getElementById('dmap').style.display = "none";
aktumap(grundblock_h,grundblock_v);
document.getElementById('dmap').style.top = "-100px";
document.getElementById('dmap').style.display = "block";
} else {
document.getElementById('pixtop').innerHTML = ntop;
document.getElementById('dmap').style.top = ntop + "px";
}
aktiv=setTimeout("moveup('1')",100);
}
}
function movedown(zustand) {
// Wie moveup nur das hier als "Schaltwert" 0 verwendet wird und der h-Wert minus 1 gerechnet wird
}
</script>
Die Funktionsaufrufe habe ich per "onmousedown="moveleft('1')" onmouseup="moveleft('2')" realisiert.
Mein HTML-Code ist:
<div id="pelement" style="width: 500px; height: 300px; overflow: hidden; background-color:#000000; position:absolute; left: 257px; top: 172px;">
<div id="dmap" style="width: 700px; height: 500px; left: -100px; top: -100px; position:absolute; background-color:#000000;">
<table style="width: 700px" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 100px; width: 100px;"><img src="images/maps/9998_9997.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/9999_9997.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/10000_9997.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/10001_9997.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/10002_9997.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/10003_9997.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/10004_9997.jpg" border="0"></td>
</tr>
<tr>
<td style="height: 100px; width: 100px;"><img src="images/maps/9998_9998.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/9999_9998.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/10000_9998.jpg" border="0"></td>
... und so weiter...
Meine PHP für das AJAX-Request:
$grundblock_h = strip_tags($_GET['h']);
$grundblock_v = strip_tags($_GET['v']);
$block_h01 = $grundblock_h + 0;
$block_h02 = $grundblock_h + 1;
$block_h03 = $grundblock_h + 2;
$block_h04 = $grundblock_h + 3;
$block_h05 = $grundblock_h + 4;
$block_v01 = $grundblock_v + 0;
$block_v02 = $grundblock_v + 1;
$block_v03 = $grundblock_v + 2;
$block_v04 = $grundblock_v + 3;
$block_v05 = $grundblock_v + 4;
$block_v06 = $grundblock_v + 5;
$block_v07 = $grundblock_v + 6;
$gzae = 0;
echo '<table style="width: 700px" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 100px; width: 100px;"><img src="images/maps/'.$block_v01.'_'.$block_h01.'.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/'.$block_v02.'_'.$block_h01.'.jpg" border="0"></td>
<td style="height: 100px; width: 100px;"><img src="images/maps/'.$block_v03.'_'.$block_h01.'.jpg" border="0"></td>
<td style="height: 100px;
...und so weiter...