Holen Sie sich alle lat und long aus db anzeigen der position auf der google-Karte

Habe ich folgende php-Seite, die einen einzigen breiten-und Längengrad aus der mysql-db und es ist editable durch Maus. Ich meine, ich kann die position durch klicken auf die Markierung.

Gut, jetzt habe ich einige lat und lange in meiner db. Ich will zeigen, alle lat und long auf der Karte. Wie kann ich dies tun.

Javascript-code:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>

<script type="text/javascript">

//Map Initialize function

function initialize() 
{
//Set static latitude, longitude value
var latlng = new google.mpaps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
//Set map options
var myOptions = {
    zoom: 16,
    center: latlng,
    panControl: true,
    zoomControl: true,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
//Create map object with options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Create and set the marker
marker = new google.maps.Marker({
    map: map,
    draggable:true, 
    position: latlng
});

//Register Custom "dragend" Event
google.maps.event.addListener(marker, 'dragend', function() {

    //Get the Current position, where the pointer was dropped
    var point = marker.getPosition();
    //Center the map at given point
    map.panTo(point);
    //Update the textbox
    document.getElementById('txt_latlng').value=point.lat()+", "+point.lng();
});
}

</script>

Html-Code:

<div style="float:left; position:relative; width:550px; border:0px #000 solid;">
<div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
</div>

Php-code:

$id = (int) $_GET['id'];
$sql = mysql_query("SELECT * FROM parkings WHERE LocId = '$id'");
$res =  mysql_fetch_array($sql);
$lat_d = $res['latitude'];
$long_d = $res['longitude'];

Jede Idee oder wie kann ich dies tun ?

  • Schleife durch Ihre lat/lng-Koordinaten in PHP. In Ihrem javascript-Marker erzeugen, für jeden von Ihnen, und erweitern die Grenzen der Karte, passen Sie alle in.
  • Gut, ich kann loop all die lat und long aus db mit php, aber wie kann ich diese verwenden, um javascript ?
InformationsquelleAutor Creativeartbd | 2013-10-28
  1. 4

    Etwas wie dies sollte den trick tun.

    <?php

//this code block contains some test stuff
$lat_d = 40.709;
$long_d = -74.007;

//mimic a result array from MySQL
$result = array(array('latitude'=>$lat_d,'longitude'=>$long_d));

?>
<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
        <script type="text/javascript">
        var map;
        function initialize() {
            //Set static latitude, longitude value
            var latlng = new google.maps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
            //Set map options
            var myOptions = {
                zoom: 16,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            //Create map object with options
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        <?php
            //uncomment the 2 lines below to get real data from the db
            //$result = mysql_query("SELECT * FROM parkings");
            //while ($row = mysql_fetch_array($result))
            foreach($result as $row) //<- remove this line
                echo "addMarker(new google.maps.LatLng(".$row['latitude'].", ".$row['longitude']."), map);";
        ?>
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true, //enables drag & drop
                animation: google.maps.Animation.DROP
            });

            return marker;
        }
        </script>
    </head>
    <body onload="initialize()">
        <div style="float:left; position:relative; width:550px; border:0px #000 solid;">
            <div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
        </div>
    </body>
</html>
    • es funktioniert nicht.
    • Finden Sie den aktualisierten code. Ich habe vergessen, die addMarker-Aufruf(s) in der initialize () - Funktion..
    • Leider ist es auch nicht funktioniert.
    • Das ist seltsam; es funktioniert hier tadellos. Gibt es irgendwelche Fehlermeldungen? Haben Sie kopiert (aktualisiert) - code? Hast du den Html-Code, den Sie in Ihrem Skript?
    • Nein, ich habe keine Fehler. Die Karte leer ist. in dem Abschnitt habe ich zu Ihrem code ? Im html-head-Bereich ?
    • Ich habe aktualisiert die Antwort mit einer vollständigen HTML-Seite. Beachten Sie, dass ich habe einige 'testdata' anstelle des Datenbank-Ergebnisse; siehe Kommentare im code. Hoffe, das hilft!
    • Eine tolle Erfahrung für mich. Danke.

    InformationsquelleAutor sgtdck
Schreibe einen Kommentar