Guten Tag kartler175,
entschuldigt bitte, ich werde mich bemühen.
Ja, es ist die falsche Stelle die ich Euch genannt habe. Es gibt tatsächlich ein Stück weiter die Bezeichnung “LatLng”:
var marker = L.marker(new L.LatLng(a[15], a[16]), { title: title });
Ich verstehe es so, dass in meinem Array “a” etwas nicht korrekt übergeben wird.
Ich bin auf der Fehlersuche. Ich melde mich, falls ich nicht mehr weiterkomme.
Danke trotzdem für Eure Mithilfe.
fox_bw
So ist es.
Zum debuggen kannst du dir die Werte in der Javascript-Knsole ausgeben lassen:
try {
var marker = L.marker(new L.LatLng(a[15], a[16]), { title: title });
} catch (error) {
console.log('>a15< ist vom Typ >%s< mit Inhalt >%s<', typeof a[15], a[15]);
console.log('>a16< ist vom Typ >%s< mit Inhalt >%s<', typeof a[16], a[16]);
console.log(error);
}
Durch das try-catch-Konstrukt wird in der Konsole nur etwas ausgegeben, wenn ein Fehler innerhalb des try’s auftritt. Aber Achtung: dadurch wird der weitere Ablauf des Scripts nicht unterbrochen, sprich, was danach kommt, wird ausgeführt. Auch wenn jetzt Marker und Cluster zu sehen sind, musst du zwingend in der Konsole nachschauen, ob die Fehlermeldungen weiterhin kommen. Ansonsten fehlen dir Marker auf der Karte.
Oder gleich den eingebauten Debugger verwenden 
ist für einen JS-Newbie natürlich etwas heftig.
Gruss
walter
Hallo zusammen,
vielen Dank für Eure Hinweise.
Wenn ich eines hier gelernt habe, dann ist es die Konsole von FF viel mehr zu nutzen. Ich programmiere bereits seit Jahren HTML/PHP aber habe die Konsole bisher nicht genutzt. Aber ich muss feststellen, dass diese sehr hilfreich ist. Auch den Debugger habe ich mir angeschaut und versucht zusammen mit der Konsole zu nutzen.
Ich bin nun einen Schritt weiter und bin an einem Punkt angelangt wo ich Eure Hilfe benötige. Anbei mein kompletter Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../styles.css" type="text/css" />
<link rel="stylesheet" href="Leaflet.markercluster-1.0.4/dist/MarkerCluster.css" />
<link rel="stylesheet" href="Leaflet.markercluster-1.0.4/dist/MarkerCluster.Default.css" />
<script src="Leaflet.markercluster-1.0.4/dist/leaflet.markercluster-src.js"></script>
<title>Karte</title>
</head>
<body>
<div id="map" style="width:98%; height:900px; margin-left:auto; margin-right:auto"></div>
<script type="text/javascript">
// Variable / Array zur Speicherung aller Infos
var geodaten = [];
<?php
// Verbindung mit DB-Server und der DB herstellen
require($_SERVER['DOCUMENT_ROOT']."/Projektverwaltung/includes/server.inc");
$Verbindung = mysqli_connect($host,$user,$pass,$db)
or die ("Fehler: ".mysqli_errno($Verbindung).", ".mysqli_error($Verbindung));
// Zeichensatz explizit setzen
mysqli_query($Verbindung,"SET NAMES 'utf8'");
// Abfrage formulieren
$sql = "SELECT * FROM mark_ort_geo WHERE (inaktiv=0 AND lat>0 AND lng>0)";
if ($result = mysqli_query($Verbindung, $sql)) {
// Zugriff auf alle zurückgelieferten Zeilen
while ($row = mysqli_fetch_row($result)):
?>
// *** JavaScript ***
// Hier füllen wir unser JavaScript-Array mit den einzelnen
// Einträgen aus der Datenbank
// [JSON-Objekt (JavaScript Object Notation)]
// echo '<b>'.$row[1].'</br>'.$row[3].'</b><br/>'.$row[4].' '.$row[5].'<br/>'.$row[6].' '.$row[7].'<br/><a href=details.php?ID='.$row[0].'>>>> Weitere Infos</a> ';
geodaten.push({
'name': "<?php echo $row[1]; ?>",
'latitude': '<?php echo $row[15]; ?>',
'longitude': '<?php echo $row[16]; ?>'
});
// *** Ende JavaScript ***
<?php
endwhile;
}
// Aufräumen
mysqli_free_result($result);
mysqli_close($Verbindung);
?>
console.log(geodaten);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points © 2012 LINZ'
}),
latlng = new L.latLng(48.7122900, 9.3087000);
var map = L.map('map', {center: latlng, zoom: 11, layers: [tiles]});
var markers = L.MarkerClusterGroup();
for (var i = 0; i < geodaten.length; i++) {
var a = geodaten[i];
console.log(geodaten[i]);
console.log(a.name);
try {
var marker = L.marker(new L.LatLng([a.latitude], [a.longitude]), { title: a.name });
console.log('>a.latitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.latitude], [a.latitude]);
console.log('>a.longitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.longitude], [a.longitude]);
console.log('>a.name< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.name], [a.name]);
} catch (error) {
console.log('>a.latitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.latitude], [a.latitude]);
console.log('>a.longitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.longitude], [a.longitude]);
console.log('>a.name< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.name], [a.name]);
console.log(error);
}
console.log(a.name);
marker.bindPopup(a.name);
markers.addLayer(marker);
}
map.addLayer(markers);
</script>
</body>
</html>
Die Konsole liefert folgende Werte zurück:
Object { name: “30-07”, latitude: “48.641956”, longitude: “9.474610” }
30-07
a.latitude< ist vom Typ >object< mit Inhalt >48.641956<
a.longitude< ist vom Typ >object< mit Inhalt >9.474610<
a.name< ist vom Typ >object< mit Inhalt >30-07<
30-07
TypeError: markers is undefined[Weitere Informationen]
http://localhost/Projektverwaltung/geo/karte-baustelle-alle-osm-cluster.php:95375:4
Im Debugger wird bei der Fehlermeldung die Zeile
markers.addLayer(marker);
markiert.
An dieser Stelle bin ich jetzt etwas ratlos. Kann mir jemand weiterhelfen?
fox_bw
a) Find the difference:
var markers = L.markerClusterGroup();
var markers = L.MarkerClusterGroup();
Hint: So ziemlich alle Leaflet-Funktionsnamen gibt es mit Groß- oder Kleinbuchstaben als 1stem Zeichen. Wenn GROß, dann mit new instantiieren, wenn klein, dann ohne new.
b) Du möchtest Latitude und Longitude zur weiteren Verwendung in Leaflet als Nummern (genauer als Floats) behandelt wissen. Mit deiner Objekt-Notation werden das Strings, nicht Floats. Wie das zu ändern ist, überlasse ich dir zum nachlesen.
In der Firefox-Entwicklerkonsole gibts unten eine Eingabezeile wo du on the fly Javascript-Code eingeben kannst. Kannst du da per Handeingabe einen Marker deinem Cluster zufügen?
Ansonsten: Bau dir ein Minimalbeispiel nur aus Javascript, gucke wie es funktioniert und setze es dann Stück für Stück größer um.
Hättest ihm ja gerne noch dazuschreiben können, dass es sich um statische und nicht-statische Methoden handelt, die es genauso auch in PHP gibt, und dass man statische Methoden (Großgeschrieben) direkt aus einer Klasse aufrufen kann ohne diese mit new instanzieren zu müssen
Im Fall “Leaflet” eher nicht, da ist das kleingeschriebene einfach nur eine Wrapper-Funktion, das ist schon ein Unterschied zu statischen Methoden in PHP:
export var scale = function (options) {
return new Scale(options);
};
https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Scale.js
Oooh Gott … warum nur?! … und nein, darauf will ich gar keine Antwort haben 
Hallo zusammen,
vielen, vielen Dank für Eure Antworten.
Ich habe meine Fehler analysiert, im Netz Funktionen nachgelesen und den Quellcode umgeschrieben.
Und…
es funktioniert.
Vielen Dank nachmals an alle die geschrieben haben.
fox_bw
Ist doch klar: Kaum macht man es richtig, funktionierts
Könntest du uns bitte das Ergebnis präsentieren? Ein Link wäre nett.
Gruss
walter
Hallo wambacher,
leider kann ich keinen Link präsentieren, da es sich um eine lokale Installation eines XAMPP-Servers handelt.
Aber ich könnte hier ein Bild einstellen.
fox_bw