Hallo zusammen,
Da ich im Showroom-Bereich keinen Thread öffnen kann, werde ich das Ganze einfach als Tutorial schreiben. Eventuell hilft es einigen Leuten, alle anderen können mich haten.
In diesem Tutorial "bestücken" wir eine Map mithilfe des jQuery-Plugins "Craftmap " und Daten aus einer MySQL-Tabelle mit Parkstandorten von Fahrzeugen. Ihr könnt selbstverständlich auch anderen Daten abfragen und so z.B. Freie Häuser auf der Karte anzeigen, das ist euch überlassen.
Eine solche Karte könnte so aussehen:
Was benötigen wir?
- Erweiterte Kentnisse in PHP & SQL
- jQuery-Plugin Craftmap inklusive Demonstrationsdateien und natürlich jQuery selbst.(Welches alles im RAR-Archiv auf der Seite enthalten ist)
- Ein wenig Hirnmasse
- Ein Gamemode, der auf MySQL-Tabellen aufbaut(Mit einem Filesystem würde es auch gehen, jedoch ist mir das zu viel unnötige Arbeit)
- Eine San-Andreas Karte, vorzugsweise gleich Diese
Ich benutze für dieses Tutorial die bereits vorhandenen Demonstrationsdateien. Im Anhang findet sich der komplette Quellcode und eine abgeänderte Version der init.js und der demo1.css.
Nun erstellen wir uns ein neues PHP-Dokument und füllen diese mit den nötigen Informationen:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eine Testmap</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/demo1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/craftmap.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>Nun kommt es ganz auf eure Tabellenstruktur an, und welche Daten ihr überhaupt aus der Datenbank auslesen wollt. Ein Beispiel wäre:
Tabllenname: vehicles
id | model | owner | x | y | z | angle | color1 | color2 | numplate | km | tank
Als Erstes müsst ihr nun die Grundstruktur des Plugins "einhalten":
<body>
<div class="demo1">
<img src="map.jpg" class="imgMap" />
</div>
<div class="controls">
</div>
</body>
</html>Erklärung:
Den Bodytag sollte ich euch nicht erklären müssen. Die Klasse wurde hier von der Demonstration übernommen. Als Imagesource müsst ihr nun eure Map angeben. In der oberen Division werden die Koordinaten und Daten zu diesen eingefügt. Unten kommen später die Verweise rein, um auch vernünftig zwischen den einzelnen Fahrzeugen(Oder was nun gewählt wurde) zu navigieren.
Um nun überhaupt Daten aus der Datenbank zu lesen, müssen wir uns verbinden:
<body>
<div class="demo1">
<img src="map.jpg" class="imgMap" />
<?php
mysql_connect("Hostname","Username","Passwort"); // bsp: localhost samp_srv 1234
mysql_select_db("Datenbank"); //bsp: sampsrv
?>
</div>
<div class="controls">
</div>
</body>
</html>Nun müssen wir ein entsprehcendes Query "erstellen":
SELECT * FROM `vehicles` WHERE (`owner`='1')
Selbsterklärend, dennoch: Selektiert alle Spalten von der Tabelle "vehicles", welche dem Besitzer(Owner) mit der ID 1 gehört(Die ID z.B. in einer players Tabelle gespeichert).
while($row = mysql_fetch_array($result)){
$id = $row["id"];
$km = $row["km"];
$tank = $row["tank"];
$numplate = $row["numplate"];
$model = $row["model"];
if($row["x"] < 0 && $row["y"] < 0)
{
$x2 = $row["x"];
$y2 = $row["y"] *= -1;
$x = $x2 + 2991;
$y = $y2 + 2984;
} else if($row["x"] < 0 && $row["y"] > 0)
{
$x2 = $row["x"];
$y2 = $row["y"] *= -1;
$x = $x2 + 2991;
$y = $y2 + 2984;
} else if($row["x"] > 0 && $row["y"] > 0)
{
$x2 = $row["x"];
$y2 = $row["y"] *= -1;
$x = 2991 + $x2;
$y = 2984 + $y2;
} else if($row["x"] > 0 && $row["y"] < 0)
{
$x2 = $row["x"];
$y2 = $row["y"] *= -1;
$x = 2991 + $x2;
$y = 2984 + $y2;
}
echo "<div class=\"marker\" id=\"$id\" data-coords=\"$x, $y\">";
echo "<h3>$numplate</h3>";
echo "<b>Kilometer:</b> $km km<br />";
echo "<b>Treibstoff:</b> $tank l<br />";
echo "</div>";
}
?>
</div>
<div class="controls">
<?
$result = mysql_query("SELECT * FROM `vehicles` WHERE (`owner`='1')");
while($row = mysql_fetch_array($result)){
$id = $row["id"];
$numplate = $row["numplate"];
echo "<a href=\"#\" rel=\"$id\">$numplate</a>";
}
?>
</div>
</body>
</html>Erklärung:
Folgt direkt nach der Verbindunsaufnahme zur Datenbank. Die Werte, welche mittels Query aus der Tabelle gelesen werden, werden ins Array $row gespeichert. Ich habe zur Vereinfachung die Werte nochmals in eine nächste Variable gespeichert, um sie später besser verwenden zu können. Als zweiter Schritt wird quasi ein Koordinatensystem über der Bild "aufgespannt" (-x-y,-x+y,+x+y,+x-y). Die Koordinaten werden in Pixel umgerechnet und entsprechend plaziert(2000er Werte - Bei dieser Karte sollte eigentlich alles 3000 sein, da ich aber ein anderes Marker-Image genommen habe, musst ich diese Werte ein wenig anpassen).
Unten werden noch die Verweise geschrieben, welche mittels des Nummernschildes "unterschieden" werden können.
Credits:
Marcin Dziewulsk - jQuery-Plugin CraftMap
IanAlbert.com - San-Andreas Karte
Virusscan:
Tutorial.zip
Abschluss:
Ich hoffe ich konnte einigen von euch mit diesem Tutorial weiterhelfen, bei Fragen bitte hier in den Thread. Ich antworte auf keine PN's oder Nachrichten via IM.