Question

我有一个填充了纬度和经度的MySQL数据库。

数据在Google地图上绘制为折线。一切正常，但我不知道如何在添加新数据时自动更新折线。

我试图在函数initmap上设置间隔，但这不起作用。如果有人可以帮我解决这个问题，我会很高兴。

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

Answer 1

您是否已经教过重新加载页面以获得所需的效果，通过将Jquery添加到您可以使用此功能的代码，这将每十秒重新加载您的浏览器，或者，您可以调用自己的方法，也许初始化地图再次重新加载所有新数据。

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

Answer 2

我找到了解决方法。

首先，我确实喜欢Ahmad建议 - 将php放在另一个文件中，并进行了ajax调用。 ajax返回了纬度和经度。

然后我创建了一个删除现有折线的函数。之后，我创建了一个由ajax调用的更新函数。

最后，我创建了一个间隔函数，它按设定的间隔调用了删除函数和更新函数。

从数据库自动更新Google Map

2 个答案: