每 5 秒从 MySQL 更新传单标记
目前我已经创建了从我的数据库中获取信息并在地图上创建一个点的传单代码。但是我将如何做到每 5 秒更新一次数据库中的位置我的代码在下面
我曾尝试使用 Setinterval 但无法使其正常工作，因为我不会刷新网站，而只会刷新积分
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="leaflet.css"/>
<script src="leaflet.js"></script>
<script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="leaflet-search.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="MarkerCluster.css" />
<link rel="stylesheet" href="MarkerCluster.Default.css" />
<script
src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
<script src="Control.Geocoder.js"></script>
<script src="jquery.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script src="leaflet-search.js"></script>
<?php
$conn = new PDO('mysql:host=privateinfo.com;dbname=FAKEINFO;charset=utf8','LOL','NOPASSWORD4U',array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
$sql = 'SELECT *, x AS x, y AS y FROM GPS';
$rs = $conn->query($sql);
if (!$rs) {
echo 'An SQL error occured.\n';
exit;
}
$geojson = array (
'type' => 'FeatureCollection',
'features' => array()
);
人到中年有点甜1回答
-
眼眸繁星
由于您使用的是 PHP，因此解决此问题的方法是将所有生成 geojson 的代码放入一个不同的 PHP 文件中，例如一个get-features.php仅调用的文件：<?php$conn = new PDO(/* stuff*/);$rs = $conn->query('SELECT *, x AS x, y AS y FROM GPS');if (!$rs) { /* handle error */ }$geojson = array ('type' => 'FeatureCollection','features' => array());while ($row = $rs->fetch(PDO::FETCH_ASSOC)) { $properties = $row; unset($properties['x']); unset($properties['y']); $array_push($geojson['features'], array( 'type' => 'Feature', 'geometry' => array( 'type' => 'Point', 'coordinates' => array($row['x'],$row['y']) ), 'properties' => $properties ) );}header('Content-Type: text/json')echo JSON_encode($geojson);?>然后，让您的 JS 每五秒重新请求该 PHP 文件的 URL，例如：setInterval(function(){ fetch('https://my-web-server/get-features.php') .then(function(response){ return response.json() }) .then(function(json){ /* Do something with the GeoJSON */ });}, 5000);或者在请求之间等待五秒的循环中请求该 URL ，以避免潜在的竞争条件：function requestGeoJson(){ fetch('https://my-web-server/get-features.php') .then(function(response){ return response.json() }) .then(function(json){ /* Do something with the GeoJSON */ setTimeout(requestGeoJson, 5000); });};requestGeoJson();这与 [ L.GeoJSON](( https://leafletjs.com/reference-1.5.0.html#geojson ) 有什么关系？天真的方法是clearLayers()和addData()，例如：// create an empty L.GeoJSON layervar geoJsonLayer = L.geoJson().addTo(map);function requestGeoJson(){ fetch('https://my-web-server/get-features.php') .then(function(response){ return response.json() }) .then(function(json){ geoJsonLayer.clearLayers().addData(json); setTimeout(requestGeoJson, 5000); });};requestGeoJson();还有其他方法可以使 JS 从网络服务器请求内容，例如使用$.getJSON或XMLHttpRequest代替fetch. 结果与您的场景相同。还有其他方法可以使用 GeoJSON 数据移动标记而不是清空和重新填充L.GeoJSON实例。例如，遍历L.GeoJSONwith内部的层eachLayer()，然后检查 JSON 有效负载中是否有相应的功能（基于任何可用的唯一 ID）并查看坐标是否已更改。请注意，JS 会每 5(ish) 秒向您的网络服务器发出一次 HTTP(S) 请求，从而使您的 PHP 代码随着每个请求再次运行。其他方法，例如使用数据库触发器和websockets允许仅在需要时发送更新，就在数据更改后，提供更好的延迟和没有重复的数据。
随时随地看视频慕课网APP
PHP