Automatische Aktualisierung von Google Map aus der Datenbank

-1

Ich habe eine MySQL-Datenbank, die mit Längen- und Breitengrad gefüllt ist.Automatische Aktualisierung von Google Map aus der Datenbank

Die Daten werden wie eine Polylinie in Google Maps dargestellt. Alles funktioniert, aber ich weiß nicht, wie die Polylinie automatisch aktualisiert wird, wenn neue Daten hinzugefügt werden.

Ich habe versucht, Intervall für die Funktion Initmap festlegen, aber das hat nicht funktioniert. Ich würde mich freuen, wenn mir jemand dabei helfen könnte.

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <style> 
     #map { 
     height: 100%; 
     } 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(59.913063,10.750923), 
     zoom: 10, 
     mapTypeId : 'terrain' 
    }); 

    var flightPlanCoordinates = [ 
     <?php 
      require("dbcred.php"); 
      $connection = mysqli_connect($host, $username, $password, $database); 

      mysqli_select_db($connection, $database); 
      $query = mysqli_query($connection,"SELECT latitude, longitude FROM geografi"); 
      while($row = mysqli_fetch_assoc($query)){ 
       $lat = $row['latitude']; 
       $lon = $row['longitude']; 
       echo 'new google.maps.LatLng('.$lat.', '.$lon.'),'; 
      } 
     ?> 
    ]; 


    var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 
     flightPath.setMap(map); 
    } 

    </script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=GoogleKey&callback=initMap"> 
    </script> 
    </body> 
    </html>

Quelle

2017-03-23 Da bear

Sie müssen Ajax Anfrage mit Intervall verwenden. Wenn Sie JS-Code von PHP-Code trennen können, wird es besser –

Ich fand die Lösung, wie es geht.

Zuerst habe ich wie von Ahmad vorgeschlagen - legte die PHP in eine andere Datei, und machte einen AJAX-Aufruf. Der Ajax gab Längen- und Breitengrad zurück.

Dann habe ich eine Funktion, die die vorhandenen Polylinien entfernt. Danach habe ich eine Update-Funktion erstellt, die von Ajax aufgerufen wurde.

Am Ende habe ich eine Intervallfunktion erstellt, die die remove-Funktion und die update-Funktion in einem festgelegten Intervall aufgerufen hat.

Quelle

2017-03-31 15:53:31

gelehrt haben Sie die Seite neu zu laden Sie die gewünschte Wirkung zu geben, von Jquery zu Ihrem Code hinzufügen Sie können diese Funktion verwenden, wird diese Ihrem Browser neu laden alle zehn Sekunden, alternativ könnten Sie Ihre eigene Methode aufrufen Stattdessen initialisieren Sie die Karte möglicherweise erneut und laden alle neuen Daten neu.

new PeriodicalExecuter(function(pe) { 
    location.reload(true); 
}, 10);

Quelle

2017-03-23 12:54:06

Vielen Dank für den Vorschlag, aber ich habe es versucht. Das einzige, was ich ändern möchte, ist die Polylinie. Wenn ich die ganze Karte jedes Mal aktualisiere, wird es zu viel sein. –

Ich frage mich, könnten Sie weiter anrufen, flightPath.setMap (map); oder vielleicht eine Update-Funktion, die Datenbank-Methode aufrufen und die Methode, um Ihre Polylinie zu zeichnen, führen Sie dies regelmäßig –

Automatische Aktualisierung von Google Map aus der Datenbank

Antwort

Verwandte Themen