Javascript 从数据库自动更新谷歌地图_Javascript_Php_Mysql_Google Maps

Javascript 从数据库自动更新谷歌地图

javascript php mysql google-maps

Javascript 从数据库自动更新谷歌地图,javascript,php,mysql,google-maps,Javascript,Php,Mysql,Google Maps,我有一个用纬度和经度填充的MySQL数据库数据在谷歌地图上以多段线的形式绘制。一切正常，但我不知道如何在添加新数据时自动更新多段线我曾尝试在函数initmap上设置interval，但没有成功。如果有人能帮我，我将不胜感激 <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta

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

数据在谷歌地图上以多段线的形式绘制。一切正常，但我不知道如何在添加新数据时自动更新多段线

我曾尝试在函数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>


#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（59.913063,10.750923），
缩放：10，
mapTypeId:'地形'
});
var FlightPlan坐标=[
];
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
flightPath.setMap（map）；
}

您是否教过如何重新加载页面以获得所需的效果，通过向代码中添加Jquery，您可以使用此功能，这将每隔10秒重新加载浏览器，或者，您可以调用自己的方法，也可以重新初始化地图重新加载所有新数据

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

我找到了解决方法

首先，我按照Ahmad的建议，将php放在另一个文件中，并进行了ajax调用。ajax返回纬度和经度

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

最后，我创建了一个interval函数，按设置的间隔调用remove函数和update函数。

您需要使用Ajax请求和interval。如果你能把js代码和php代码分开，那就更好了谢谢你的建议，但我试过了。我唯一想更改的是多段线。如果我每次都更新整个地图，那就太多了。我想知道你能不能继续打电话，flightPath.setMap（map）；或者做一个更新函数，调用数据库方法和绘制多边形线的方法，定期运行这个函数