更新用戶位置每10秒後 - 獲取位置表mysql

Question

我正在構建一個應用程序，從mysql獲取用戶數據並在地圖上顯示它們， 從我的Android應用程序，我更新表（拉特，lon）每10秒，現在我想更新其對谷歌地圖（Web應用程序）位置而無需刷新地圖或頁面

這裏是我的代碼：

此功能頁上的負載刷新

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); 
} 

makeRequest的功能

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); 
      }); 
} 

我所做的就是加入這一行window.setInterval（initMap，5000）;在initMap函數的結尾，但它加載地圖，我只想更改位置而不刷新頁面或地圖。 任何解決方案？

Answer 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);