• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Punkte aus Datenbank in eine Karte laden

C

chr_sch

Neues Mitglied
Hallo,
ich möchte aus einer MySQL-Datenbank Punkte auslesen(Koordinaten kann ich schon mal auslesen) und anschließend will ich diese Koordinaten nutzen, um diese in einer Karte auszeigen zu lassen.
Da hab ich mir gedacht, dass ich diese Koordinaten gleich in eine Funktion reinpacke, welche dann Punkte konstruiert. Leider funktioniert das nicht und ich als Anfänger bräuchte da mal ein paar Hilfen.
Die entsprechenden Zeilen habe ich der Übersichtlichkeit wegen mal fett geschrieben. Die $x_koord und $y_koord werden korrekt ausgelesen. Und der Punkt, der über der Funktion steht, wird auch konstruiert.
Hoffe jemand kann mir helfen.

GRuss


Code: 
<!DOCTYPE html>
<html>

<head>
    <meta    charset = "UTF-8">
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>Webforum</title>
    
        <script src = "http://openlayers.org/api/OpenLayers.js"></script>
    <script src = "http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    
    <script>
            // globale Daten:
            var map;
            var vectors;
            var pnr = 1;

            function onFeatureSelect( evt ) {
                //alert( evt.feature.ID );
                // Popup erzeugen:
                var html="<p>POI " + evt.feature.ID + "</p>";
                var popup = 
                    new OpenLayers.Popup.FramedCloud("featurePopup",evt.feature.geometry.getBounds().getCenterLonLat(), // Anzeigeposition
                    new OpenLayers.Size(100,100), // Grösse in Pixel
                    html, // HTML-Code, der im Popup angezeigt 
                                          // werden soll
                    null, 
                    true, // Show close box
                    null //onPopupClose // Function to be called on closeBox click 
                );
                map.addPopup(popup); // Popup anzeigen
                
                evt.feature.popup = popup; // Merken, damits später wieder gelöscht werden kann
            }
            function onFeatureUnselect( evt ) {
                map.removePopup(evt.feature.popup); // Popup ausblenden
                evt.feature.popup.destroy(); // Popup loeschen
                evt.feature.popup = null;
            }
            
            // initialisierung:
            function init() {
                map = new OpenLayers.Map("map" );
                var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik",{layers: 'basic'});
                var layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("Fahrradkarte");
                vectors = new OpenLayers.Layer.Vector("Vector Layer");

                
                map.addLayers( [layerCycleMap,mapnik,vectors] );
                
                
                // Controls definieren:
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.MousePosition());
                map.addControl(new OpenLayers.Control.ScaleLine());
                
                // Point Construction control erzeugen und in map einsetzen:
                var pointConstructor =     new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point);
                map.addControl(pointConstructor);
                
                pointConstructor.handler.callbacks.done = function( point ) {
                    var poiStyle = OpenLayers.Util.extend(
                      {},   OpenLayers.Feature.Vector.style["default"]);
                    OpenLayers.Util.extend(
                      poiStyle,   {fillColor: "green", fillOpacity:0.8, pointRadius:15});
                    /*
                //Punkt konstruieren
                    var pointFeature = new OpenLayers.Feature.Vector(point, null, poiStyle );
                    vectors.addFeatures( [pointFeature] );
                    pointFeature.ID = pnr++;
                    
                    alert( "Punkt eingefügt: (" + point.x + "," + point.y + ")" );
                    */
                }

                // Control aktivieren:
                pointConstructor.activate();
            
                
                // Mouse Hover aktivieren:
                var selectControl = new OpenLayers.Control.SelectFeature( vectors, {hover:true});
                map.addControl(selectControl);
                // Control aktivieren:
                selectControl.activate();
                vectors.events.on({
                    'featureselected': onFeatureSelect,
                    'featureunselected': onFeatureUnselect
                });


                // Set initial view and scale:                     
                 var lon= 1488143.92;  // Berliner HBF
                 var lat= 6895656.55; 

                 var zoom= 5;

                 var lonLat = new OpenLayers.LonLat(lon, lat);
                 map.setCenter (lonLat, zoom);
                 
                // Einfügen eines POI in den Vektorlayer:
                 // Construct style for new POIs based on existing default style:
                var poiStyle = OpenLayers.Util.extend(
                  {},   OpenLayers.Feature.Vector.style["default"]);
                OpenLayers.Util.extend(
                  poiStyle,   {fillColor: "red", fillOpacity:0.8, pointRadius:10});
                  
                // Punkt konstruieren: 
                var point = new OpenLayers.Geometry.Point(913148.3,7009351.4);
                var pointFeature = new OpenLayers.Feature.Vector(point, null, poiStyle );
                pointFeature.ID ="Punkt1";
                vectors.addFeatures([pointFeature]);
                
              [B]  function punkt_erstellen(x_koordinate,y_koordinate){
                         var point = new OpenLayers.Geometry.Point(x_koordinate,y_koordinate);
                         var pointFeature = new OpenLayers.Feature.Vector(point, null, poiStyle );
                         pointFeature.ID ="Punkt1";
                         vectors.addFeatures([pointFeature]);
                }[/B]
                
                
                
            }
            
            
        </script>
    
</head>

<body>
    <div id= "header">
        <h2>WebForum</h2>
    </div>
    
    <div id="standard">
    
    
    <?php include 'db_anmelde.php';
        $kat_id = $_REQUEST['kat_id'];
        $kat_anzeige = $dbh->query("SELECT kategorie.katname FROM kategorie WHERE id = '$kat_id';");
        $row = $kat_anzeige->fetch(PDO::FETCH_OBJ);
    ?> 
    <h4>Kategorie: 
    <?    echo $row->katname;?></h4>
    </br></br>

    <!-- Anzeige der vorhandenen Beitr娥 -->
    <?
        $beitragsanzeige = $dbh->query("SELECT beitrag.*, autor.autor_id,autor.name, kategorie.katname FROM beitrag,autor,kategorie WHERE fk_kategorie = '$kat_id' AND fk_autor=autor.autor_id;");
        if($beitragsanzeige){
            while ($row = $beitragsanzeige->fetch(PDO::FETCH_OBJ)){
                ?>Autor: <?echo $row->name; echo "\t";?><img src="showPic.php?id=<?= $row->autor_id; ?>" width=40 height=40></br>
                Kategorie: <?echo $row->katname;?></br>
                Datum: <?echo $row->datum;?></br>
                Kurzbeschreibung: <?echo $row->kurzbeschreibung;?></br>
[B]                <? $x_koord = $row->x_koordinate;?>
                <? $y_koord = $row->y_koordinate;?>[/B]
                
                <a href="beitrag_liste_einzel.php?kat_id=<?echo $kat_id;?>&beitrag_id=<?echo $row->id;?>">Beitrag lesen</a>
                <a href="beitrag_loeschen.php?beitrag_id=<?echo $row->id;?>">Beitrag löschen</a>
                <a href="beitrag_aendern.php?beitrag_id=<?echo $row->id;?>">Beitrag ändern</a></br></br>
                <?
            }
        }
    ?>
    
    <body onload="init()">
    <div style="width:50%; height:400px" id="map"> </div>
   [B] <body onload="punkt_erstellen($x_koord,$y_koord)">[/B]
    </br>
    <a href="ort.php?kat_id=<?echo $kat_id;?>">Beitrag erstellen</a>
    </br></br></br>

    <a href="index.php">Startseite</a>
    

    
    </div>
</body>

</html>
 
Hallo,

du machst ein grundlegenden fehler EVA Prinzip ist bei PHP sehr wichtig und macht vielles einfacher
(Eingabe-Verarbeitung-Anzeige)
Das ist bei dir das ganz ganz am anfang das php zeugs rein kommt mit der DB abfrage inkl das einlesen der Variablen, dann halt der ganze rest mit der ausgabe und dann macht die funktion kein sin mehr.

Die frage ist auch was sagt firebug oder gibt es kein forum von obenS?

Cheffchen
 
Also mit Firebug kenn ich mich gar nicht aus. Hab mir das gerade installiert, aber das hat beim Öffnen der Website nicht gemeckert.

Wenn ich dich richtig verstanden habe, dann müsste ich ja die ganzen Punktkoordinaten schon im JavaScript-Teil der Seite zur Verfügung haben. Das ist aber ein Problem, da ich mich lediglich mit der PDO-Schnittstelle zwischen MySQL und PHP ein wenig auskenne. Gibt es auch eine JS-MySQL-Schnittstelle. So dass ich aus JavaScript auf meine Datenbank zugreifen kann?

Oder funktioniert es, wenn ich einen PHP-Teil, in dem ich die Punkte auslese, vor den JS-Script-Teil packe? Das wäre nur doof, weil der JS-Teil im "head" steht.
 
Zuletzt bearbeitet:
Hallo,

JS-MySQL-Schnittstelle
Zum Vergrößern anklicken....
nicht so richtig aber ajax kann von JS auf eine andere php datei zugreifen.
Oder funktioniert es, wenn ich einen PHP-Teil, in dem ich die Punkte auslese, vor den JS-Script-Teil packe? Das wäre nur doof, weil der JS-Teil im "head" steht.
Zum Vergrößern anklicken....
genau das hatte ich gemeint, was stört dich daran das php/mysql zeug vor den html teil zu haben, damit brächtest nicht die onload und die funktion auch nicht und als nebenbei ist das sogar richtiger :O)

im grunde so
<?php
PHP TEIL MIT SQL ABFRAGE
?>
<!DOCTYPE html>
<HTML>
HIER DAS HTML DOCUMENT
</HTML>
Zum Vergrößern anklicken....
Cheffchen
 
wieso bräuchte ich die onload funktion nicht? ich muss doch irgendwie die karte laden..
und eine funktion für die punkte brauche ich doch auch...
 
Zuletzt bearbeitet:
also. ich hab jetzt mal die Punkte in PHP in einen Array eingelesen

PHP: 
<?php include 'db_anmelde.php';
    $kat_id = $_REQUEST['kat_id'];

    $punktdaten_fetch = $dbh->query("SELECT * FROM beitrag WHERE fk_kategorie = '$kat_id';");
        if($punktdaten_fetch){
            while ($row = $punktdaten_fetch->fetch(PDO::FETCH_OBJ)){
                $beitrag_id = $row->id; 
                $x_koord = $row->x_koordinate;
                $y_koord = $row->y_koordinate;
                $punktdaten[] = array('beitrag_id' => $beitrag_id , 
                                      'x'   => $x_koord, 
                                      'y'   => $y_koord );
            }
        }


?>

der array füllt sich auch mit den richtigen daten. jetzt möchte ich die in javascript benutzen. hab schon mal gegooglet wie das funktionieren könnte, leider aber ohne erfolg.
weiß jemand wie ich in JS auf die daten des arrays zugreifen kann?
 
hab gerade gemerkt, dass man PHP auch zwischen JAVAScript ausführen kann und nicht nur in HTML :-)
anfängerfehler.....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben