Array aus MySQL mit PHP nach JS und Formatierungsproblem

prodosenbier · 20. Okt. 2016

Irgendwie schäme ich mich etwas wegen meinem Code, das geht sicher eleganter und kürzer. Aber ich brauche mal etwas Hilfe:

Google bietet an, Kartenausschnitte in Webseiten zu integrieren. Hab ich gemacht und das Teil so konfiguriert, dass auch gleich 5 Marker auf meiner Karte angezeigt werden. Diese Marker sind aber veränderlich und ich möchte später nicht immer das im Quelltext hart eincoden. Deshalb meine Idee, die Werte über eine Webseite in eine MySQL-Tabelle schreiben und mittels PHP auslesen und diese Werte in das Array für den Google-Code schreiben. Und daran verzweifele ich. Google schreibt die Werte wie folgt in das Array:

HTML:

var fplaces = [
  ['F1', 53.336632, 10.346891, 4],
  ['F2', 53.336173, 10.348899, 5],
  ['F3', 53.336495, 10.349754, 3],
  ['F4', 53.336364, 10.347521, 2],
  ['F5', 53.336897, 10.347814, 1]
];

und zieht die über diese Schleife wieder raus:

HTML:

  for (var i = 0; i < fplaces.length; i++) {
    var fplace= fplaces[i];
    var marker = new google.maps.Marker({
      position: {lat: fplace[1], lng: fplace[2]},
      map: map,
      icon: image,
      shape: shape,
      title: fplace[0],
      zIndex: fplace[3]
    }

Das funktioniert auch. Aber mir gelingt es nicht, die Werte aus meiner Datenbank wieder so zusammenzubauen, dass die Schleife die da wieder rausholt. Mein Array wird auch gefüllt, aber hier erstmal mein Code, wie ich das zusammenstelle:

HTML:

<script>
var fplaces = new Array ();
var fplaces1 = new Array ();
var fplaces2 = new Array ();
var fplaces3 = new Array ();
phpplaces= new Array(<?php echo json_encode($places); ?>);
var dsplaces = phpplaces.toString().split(',');                                  // die einzelnen Datensätze werden gesplittet
  for (i=0; i < dsplaces.length; i++) {
            for (z=0; z < 4; z++) {                                              // jeweils 4 Entitäten jedes Datensatzes werden gesplittet
                var fieldplaces = dsplaces[i].toString().split('-');     
                var wert0 = fieldplaces[0];
                var wert1 = fieldplaces[1];
                var wert2 = fieldplaces[2];
                var wert3 = fieldplaces[3];
            }

// verschiedne Variable werden zusammengesetzt (zum Testen)
var wertp2 = wert0 + ", " + wert1 + ", " + wert2 + ", " + wert3;
var wertp3 = wert0 + "," + wert1 + "," + wert2 + "," + wert3;
if  (i + 1 < dsplaces.length) {
   var wertp = "['" + wert0 + "', " + wert1 + ", " + wert2 + ", " + wert3 + "],";
   var wertp1 = wert0 + ", " + wert1 + ", " + wert2 + ", " + wert3 + ",";
}
else {
var wertp = "['" + wert0 + "', " + wert1 + ", " + wert2 + ", " + wert3 + "]";
var wert1 = wert0 + ", " + wert1 + ", " + wert2 + ", " + wert3;
};
fplaces.push(wertp);
fplaces1.push(wertp1);
fplaces2.push(wertp2);
fplaces3.push(wertp3);
  }

//document.write('Plätze: ');
//  for (i=0; i < fplaces.length; i++) {
//  document.write(fplaces[i]);
//  }

//document.write('Plätze1: ');
//  for (i=0; i < fplaces1.length; i++) {
//  document.write(fplaces1[i]);
//  }

//document.write('Plätze2: ');
//  for (i=0; i < fplaces2.length; i++) {
//  document.write(fplaces2[i]);
//  }

document.write('Plätze3: ');
  for (i=0; i < fplaces3.length; i++) {
  document.write(fplaces3[i]);
  }

</script>

Testweise lasse ich mir 4 Arrays befüllen, die die Werte auch enthalten und wie folgt zurückschreiben:
fplaces bring:

['F1', 41.030328, 9.544807, 1],['F2', 41.029904, 9.548047, 2],['F3', 41.028337, 9.546803, 3],['F4', 41.027924, 9.547638, 4],['F5', 41.028565, 9.548740, 5]

fplaces1 bringt:

F1, 41.030328, 9.544807, 1,F2, 41.029904, 9.548047, 2,F3, 41.028337, 9.546803, 3,F4, 41.027924, 9.547638, 4,F4, 41.027924, 9.547638, 4,

fplaces2 bring:

F1, 41.030328, 9.544807, 1F2, 41.029904, 9.548047, 2F3, 41.028337, 9.546803, 3F4, 41.027924, 9.547638, 4F5, 41.028565, 9.548740, 5

fplaces3 bringt:
F1,41.030328,9.544807,1F2,41.029904,9.548047,2F3,41.028337,9.546803,3F4,41.027924,9.547638,4F5,41.028565,9.548740,5

Werte aus dem von Google vorgegebenen Array werde durch document.write wie folgt zurückgegeben:
F1,53.336632,10.346891,4F2,53.336173,10.348899,5F3,53.336495,10.349754,3F4,53.336364,10.347521,2F5,53.336897,10.347814,1

Frage: Wie baue ich mein Array korrekt zusammen bzw. wie formatiere ich die Werte?

prodosenbier · 21. Okt. 2016

Hatte hier gestern noch im Forum gesucht und da stand was von "man soll mal einen Blick in die Entwicklerkonsole des Browser werfen" was ich dann mal tat und da stehen für meine vermeintlichen Werte, die für Google Zahlen sein sollen, Meldungen wie

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

und

InvalidValueError: setZIndex: not a number

für alle fünf Aufrufe zum Setzen der Marker.

Also doch wie vermutet ein Werteproblem, weil ich Strings in das Array schreibe statt Zahlen?

SteelWheel · 21. Okt. 2016

Hi ho und Grüß Gott,

ich hantiere mit tonnenweise Daten aus meiner Datenbank und implementiere diese für JavaScript - ganz ohne Stress.

JavaScript schert es nicht, woher die Daten kommen oder wie diese dort eingetragen werden - wichtig ist nur die Syntax.

Dir ist aufgefallen, dass fplaces Arrays im Array hat? Gut.

Was spräche gegen sowas?

Code:

var fplaces = [
  [<?php echo $fplaces1; ?>],
  [<?php echo $fplaces2; ?>],
  ...
];

Dann gibst Du Deine Zeichenkette da rein - 'F1', 53.336632, 10.346891, 4 - und das war's schon.

Deine Fehlermeldungen kommen zustande, da die Syntax wohl nicht passt. Deine for-Schleife arbeitet mit fplace - das ist aber die Kurzform von fplaces. Ich erwähne das nur, da ich den Eindruck habe, dass Dir das durchgerutscht ist - denn eigentlich sieht Dein String sehr richtig aus.

Hast Du Dir den generierten Source mal angeschaut? Häufig scheitert es an single oder double quotes, die kollidieren.

Tipp: Ich würde die Ausgabe nicht mittels document.write() machen, sondern direkt von PHP schreiben lassen - ist weniger aufwendig.

split('-') verstehe ich allerdings gar nicht, da ich nicht sehe, wo Du den eigentlich verwenden willst. Dann mutmaße ich Murks in der Speicherart innerhalb der Datenbank und Du willst es da wieder auseinander biegen.

Ich schaue hier später nochmal rein ... falls Du noch was Hilfreiches (oder es gelöst) hast.

Viele Grüße

kkapsner · 21. Okt. 2016

Auch ist es immer hilfreich(er) bei einem JS-Problem den HTML-Quelltext, der beim Browser ankommt zu zeigen, und nicht (nur) den PHP-Quellcode.

prodosenbier · 21. Okt. 2016

Bin einen Schritt weiter. Ich war halt nicht in der Lage ein korrektes Array im Array zu bauen. Das funktioniert jetzt, aber der Aufruf der Google-Map setzt die Marker nicht und quittiert das mit den Fehlern

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

und

InvalidValueError: setZIndex: not a number

im Moment des Kartenaufrufes. Ich hab mal nur zwei Datensätze in der Datenbank. Der gesamte Quellcode der Seite ist dieser:

PHP:

<?php
// Kartentest

include ("conf.php");

// Datenbankzugriff
$connid = mysql_connect($HOST,$ID,$PW);
mysql_select_db($DB,$connid);
$result = mysql_query("select short_name, geolat, geolon, geoid from tbl_geodat");
$places= array();
while( $r = mysql_fetch_assoc($result) ) {
  $places[] = $r['short_name']."-".$r['geolat']."-".$r['geolon']."-".$r['geoid'];
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kartentest</title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $CHARSET ?>">

<style type=text/css>
<?php echo $STYLE ?>
</style>

     <style>
      html, body {
      	position: absolute;
        left: 10px;
      	top: 150px;
        height: 80%;
        width:1150px;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>

</head>
<body>

<div id="map"></div>
<script>

// The following function creates complex markers to indicate places

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {lat: 41.02922, lng: 9.54852}
    });
  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.

// Array-Behandlung
var fplaces = new Array ();
phpplaces= new Array(<?php echo json_encode($places); ?>);
var dsplaces = phpplaces.toString().split(',');                          //die einzelnen Datensätze werden gesplittet
for (i=0; i < dsplaces.length; i++) {
  for (z=0; z < 4; z++) {                                              // jeweils 4 Datenfelder jedes Datensatzes werden gesplittet
    var fieldplaces = dsplaces[i].toString().split('-');     
    var wert0 = fieldplaces[0];
    var wert1 = fieldplaces[1];
    var wert2 = fieldplaces[2];
    var wert3 = fieldplaces[3];
  }
var wertp = [wert0, wert1, wert2, wert3 ];
fplaces.push(wertp);
}

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'htmlpics/fpl.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(30, 40),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 40)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (var i = 0; i < fplaces.length; i++) {
    var fplace = fplaces[i];

    if(isNaN(fplace[0])){
      alert(fplace[0] + " is not a number");
    }else{
      alert(fplace[0] + " is a number");
    }

    if(isNaN(fplace[1])){
      alert(fplace[1] + " is not a number");
    }else{
      alert(fplace[1] + " is a number");
    }

    if(isNaN(fplace[2])){
      alert(fplace[2] + " is not a number");
    }else{
      alert(fplace[2] + " is a number");
    }

    if(isNaN(fplace[3])){
      alert(fplace[3] + " is not a number");
    }else{
      alert(fplace[3] + " is a number");
    }

    var marker = new google.maps.Marker({
      position: {lat: fplace[1], lng: fplace[2]},
      map: map,
      icon: image,
      shape: shape,
      title: fplace[0],
      zIndex: fplace[3]
    });
  }
}
</script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgyIA8Srf9cTfFjJyXFoCCeF8YQsl8Zk8&signed_in=true&callback=initMap"></script>

</body>
</html>

Aufrufen könnt Ihr die Seite über folgenden Link:

mit Alert-Boxen und Wertemeldung

bzw. ohne die acht alert-Boxen

ohne Alert-Boxen

Hat jemand eine Idee, was hier bei Google beim Aufruf meiner Marker falsch läuft?

prodosenbier · 21. Okt. 2016

Die Erstellung des Arrays und Auslesen der Daten funktioniert nun. Leider wirft Google im Moment des Kartenaufrufes und Setzen der Marker folgende Fehlermeldung:

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

und

InvalidValueError: setZIndex: not a number

Hier der gesamte Code:

PHP:

<?php
// Kartentest

include ("conf.php");

// Datenbankzugriff
$connid = mysql_connect($HOST,$ID,$PW);
mysql_select_db($DB,$connid);
$result = mysql_query("select short_name, geolat, geolon, geoid from tbl_geodat");
$places= array();
while( $r = mysql_fetch_assoc($result) ) {
  $places[] = $r['short_name']."-".$r['geolat']."-".$r['geolon']."-".$r['geoid'];
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kartentest</title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $CHARSET ?>">

<style type=text/css>
<?php echo $STYLE ?>
</style>

     <style>
      html, body {
      	position: absolute;
        left: 10px;
      	top: 150px;
        height: 80%;
        width:1150px;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>

</head>
<body>

<div id="map"></div>
<script>

// The following function creates complex markers to indicate places

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {lat: 41.02922, lng: 9.54852}
    });
  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.

// Array-Behandlung
var fplaces = new Array ();
phpplaces= new Array(<?php echo json_encode($places); ?>);
var dsplaces = phpplaces.toString().split(',');                          //die einzelnen Datensätze werden gesplittet
for (i=0; i < dsplaces.length; i++) {
  for (z=0; z < 4; z++) {                                              // jeweils 4 Datenfelder jedes Datensatzes werden gesplittet
    var fieldplaces = dsplaces[i].toString().split('-');     
    var wert0 = fieldplaces[0];
    var wert1 = fieldplaces[1];
    var wert2 = fieldplaces[2];
    var wert3 = fieldplaces[3];
  }
var wertp = [wert0, wert1, wert2, wert3 ];
fplaces.push(wertp);
}

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'htmlpics/fpl.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(30, 40),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 40)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (var i = 0; i < fplaces.length; i++) {
    var fplace = fplaces[i];

    if(isNaN(fplace[0])){
      alert(fplace[0] + " is not a number");
    }else{
      alert(fplace[0] + " is a number");
    }

    if(isNaN(fplace[1])){
      alert(fplace[1] + " is not a number");
    }else{
      alert(fplace[1] + " is a number");
    }

    if(isNaN(fplace[2])){
      alert(fplace[2] + " is not a number");
    }else{
      alert(fplace[2] + " is a number");
    }

    if(isNaN(fplace[3])){
      alert(fplace[3] + " is not a number");
    }else{
      alert(fplace[3] + " is a number");
    }

    var marker = new google.maps.Marker({
      position: {lat: fplace[1], lng: fplace[2]},
      map: map,
      icon: image,
      shape: shape,
      title: fplace[0],
      zIndex: fplace[3]
    });
  }
}
</script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgyIA8Srf9cTfFjJyXFoCCeF8YQsl8Zk8&signed_in=true&callback=initMap"></script>

</body>
</html>

Test der Seiten kann hier erfolgen:

mit acht Alert-Boxen für die Rückgabewerte

ohne Alert-Boxen

Wie bewege ich Google dazu, die Marker zusetzen?

Array aus MySQL mit PHP nach JS und Formatierungsproblem

prodosenbier

New member

prodosenbier

New member

SteelWheel

New member

kkapsner

Super Moderator

prodosenbier

New member

prodosenbier

New member