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

Question

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

这是我的代码:

此函数在页面刷新时加载

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); 但它加载了 map ，我只想更改位置而不刷新页面或 map 。对此有什么解决方案吗？

Answer 1

您需要创建一个数组并将标记添加到数组中。在更新新标记之前，需要从 map 中删除标记。这可以通过使用下面给出的 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);