自動アップデートGoogle Map from database

-1

MySQLデータベースに緯度と経度が設定されています。自動アップデートGoogle Map from database

データは、Googleマップ上でポリラインのようにプロットされています。すべて動作していますが、新しいデータが追加されたときにポリラインを自動更新する方法がわかりません。

私は関数initmapでintervalを設定しようとしましたが、うまくいかなかった。誰かが私にこれを手伝ってもらえるかどうかはわかります。

<!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>

出典

2017-03-23 Da bear

間隔でAjaxリクエストを使用する必要があります。 jsコードとPHPコードを分けることができれば、より良いでしょう。 –

解決方法が見つかりました。

まず、Ahmadが提案したように - PHPを別のファイルに入れて、ajax呼び出しを行いました。 ajaxは緯度と経度を返しました。

次に、既存のポリラインを削除する関数を作成しました。その後、私はajaxによって呼び出された更新機能を作成しました。

最後に、remove関数とupdate関数を呼び出すinterval関数を一定の間隔で作成しました。

出典

2017-03-31 15:53:31

あなたはあなたに所望の効果を与えるためにページをリロードについて教えてきました、あなたはこの機能を使用することができ、あなたのコードにjqueryのを追加することで、これは、代わりに、あなたがあなた自身のメソッドを呼び出すことができ、10秒ごとにブラウザをリロードします代わりに、マップを再度初期化して、すべての新しいデータを再ロードすることができます。

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

出典

2017-03-23 12:54:06

提案していただきありがとうございますが、私はそれを試みました。私が変えたいのは、ポリラインだけです。毎回地図全体を更新すると、あまりにも多くなります。 –

あなたは、flightPath.setMap（map）;またはデータベースメソッドを呼び出す更新関数を作成し、ポリラインを描画するメソッドを定期的に実行し続ける –

自動アップデートGoogle Map from database

答えて

関連する問題