HTML 每3秒刷新一次浏览器

Posted 2021-05-24

<meta http-equiv="refresh" content="3" />

每 10 秒更新一次用户位置 - 从 mysql 获取位置

【中文标题】每 10 秒更新一次用户位置 - 从 mysql 获取位置

【英文标题】：Update User Locations after every 10 sec - get location form mysql

【发布时间】：2016-12-10 04:03:11

【问题描述】：

我正在构建一个应用程序，它从 mysql 获取用户数据并在地图上显示它们， 从我的 Android 应用程序中，我每 10 秒更新一次表格（纬度，经度），现在我想在谷歌地图（网络应用程序）上更新他们的位置不刷新地图或页面

这是我的代码：

此函数在页面刷新时加载

function initMap() 

    var mapOptions = 
    zoom: 11,
    center: lat: 33.7167, lng: 73.0667,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    

    map = new google.maps.Map(document.getElementById("map_canvas"), 
 mapOptions);

    makeRequest('get_locations.php', function(data) 

    var data = JSON.parse(data.responseText);

        for (var i = 0; i < data.length; i++) 
            //display(data[i]);
            displayLocation(data[i]);
        
    );
//window.setInterval(initMap, 15000);   

ma​​keRequest函数

function makeRequest(url, callback) 
var request;
if (window.XMLHttpRequest) 
    request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
 else 
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5

request.onreadystatechange = function() 
    if (request.readyState == 4 && request.status == 200) 
        callback(request);
    

request.open("GET", url, true);
request.send();

get_location.php

<?php
include('connection.php');
$l= array();
$result = mysqli_query($con,"SELECT * FROM users");
while ($row = mysqli_fetch_assoc($result)) 
$l[] = $row;

$j = json_encode($l, true);
echo $j;
//return $j;
?>

显示位置功能

function displayLocation(location) 

            var contentString ='<div class=\"chapter-bubble\">' 
+'<strong>Name: ' + location.username + '</strong>'+'<br/>'+'<strong>Phone: 
</strong>'+location.phone_number +'</strong>'+'<br/>'+'<strong><a 
href=\"sendsms.php?phone_number=' + location.phone_number + '&username=' + 
location.username +'\"> Send SMS</a> </strong>'+'<br/></div>' ;
            //window.alert(location.name);

            var position = new google.maps.LatLng(parseFloat(location.lat), 
parseFloat(location.lon));
            //window.alert(position);

            var image;
                if (location.is_safe=="0")
                
                    image = new 
google.maps.MarkerImage('placer/not_safe.png', null, null, null, new 
google.maps.Size(40, 40));
                
                else if (location.is_safe=="1")
                
                    image = new 
google.maps.MarkerImage('placer/yes_safe.png', null, null, null, new 
google.maps.Size(40, 40));
                

                //window.alert(image);



            var marker = new google.maps.Marker(
            position: position,
            map: map,
            icon: image,
            animation: google.maps.Animation.DROP,
            title: location.username
            );

            var infowindow = new google.maps.InfoWindow(
                content:contentString
            );
            google.maps.event.addListener(marker, 'click', function() 
            infowindow.open(map,marker);
            );

我所做的是在 initMap 函数的末尾添加这一行 window.setInterval(initMap, 5000); 但它会加载地图，我只想更改位置而不刷新页面或地图。 有什么解决办法吗？

【参考方案1】：

您需要创建一个数组并将标记添加到数组中。在更新新标记之前，需要从地图中删除标记。这可以通过使用下面给出的 clearMarkers 方法来完成

在js文件的顶部声明这个

var markerArray = new Array();

在js文件中添加如下方法

function clearMarkers()
 
     for(var j=0, len = markerArray.length; j<len; j++)
        
         markerArray[j].setMap(null);     
        
        markerArray = new Array();
  

将代码从initMap中分离出来，创建一个名为updateLocation的新方法

function updateLocation()

  makeRequest('get_locations.php', function(data) 

        clearMarkers();

        var data = JSON.parse(data.responseText);

            for (var i = 0; i < data.length; i++) 
                //display(data[i]);
                displayLocation(data[i]);
            
        );
    window.setInterval(updateLocation, 15000); 

会从initMap方法调用

function initMap() 

    var mapOptions = 
    zoom: 11,
    center: lat: 33.7167, lng: 73.0667,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    

    map = new google.maps.Map(document.getElementById("map_canvas"), 
 mapOptions);

  updateLocation();    

在创建后的显示位置函数中将标记添加到数组中：

var marker = new google.maps.Marker(
            position: position,
            map: map,
            icon: image,
            animation: google.maps.Animation.DROP,
            title: location.username
   );

 markerArray.push(marker);