Elimine el marcador anterior y agregue el marcador en la última actualización.

Tengo un dispositivo gps que envía datos cada 10 segundos. Estoy guardando los datos (lat, lng) en la base de datos MySql., Estoy recuperando los datos de la base de datos y colocando los marcadores en esos latlng usando xmlHttpRequest (). También estoy usando setInterval () para xmlHttpRequest en 10 segundos. Los marcadores se están agregando finamente, pero se agregan nuevos marcadores después de actualizar el sitio whol, no después de 10 segundos en xmlhttpreq.

También tengo dos problemas –

  1. Mi xmlHttpRequest () se está refrescando bien después de 10 segundos y obteniendo el archivo get_data.php como estoy viendo desde la Red, XHR pero no agrega un marcador nuevo en el mapa, pero se solicita el xmlHttp después de 10 segundos. ¿Cómo puedo también actualizar el marcador?

  2. Los marcadores se están agregando de acuerdo con los datos de la base de datos, pero no quiero muchos marcadores, solo quiero un marcador que se actualizará cada 10 segundos. Por lo tanto, el marcador anterior se eliminará y el nuevo marcador se agregará. ¿Cómo puedo hacer eso? Abajo está mi código –

index.html

    #map-canvas{ height: 500px; }   Google Map Test   var map; //var geocoder = new google.maps.Geocoder(); //var infowindow = new google.maps.InfoWindow(); 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() { console.log(request) if (request.readyState == 4 && request.status == 200) { callback(request); } } request.open("GET", url, true); request.send(); console.log(request) } function initialise(){ var mapOptions = { center: new google.maps.LatLng(23.7000, 90.3667), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); makeRequest('get_data.php', function(data) { var data = JSON.parse(data.responseText); for (var i = 0; i < data.length; i++) { displayLocation(data[i]); } }); // var myLatLng = {lat: 23.7000, lng: 90.3667}; // var marker = new google.maps.Marker({ // map: map, // position: myLatLng, // title: 'test!' // }); } setInterval("makeRequest('get_data.php')",10000); function displayLocation(location) { //var content = '
' + location.lat +'' // + '
' + location.lon + '
'; console.log(location.lat) // location = JSON.parse(location) var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng)); var marker = new google.maps.Marker({ map: map, position: position, title: 'test!' }); // google.maps.event.addListener(marker, 'click', function() { // infoWindow.setContent(content); // infoWindow.open(map,marker); // }); }
initialise();

get_data.php

  $connection = mysqli_connect("localhost", "root", "123", "gpsdata") or die("Error " . mysqli_error($connection)); $sql = "select * from locations"; $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection)); $emparray = []; while($row = mysqli_fetch_assoc($result)) { $emparray[] = $row; } echo json_encode($emparray); mysqli_close($connection); 

Tiene dos opciones, ambas implican mantener una referencia al marcador fuera de la función displayLocation :

  1. Usa la referencia para mover el marcador existente.
 var marker; function displayLocation(location) { console.log(location.lat) var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng)); if (marker && marker.setPosition) { // if the marker already exists, move it (set its position) marker.setPosition(location); } else { // create a new marker, keeping a reference marker = new google.maps.Marker({ map: map, position: position, title: 'test!' }); } } 
  1. eliminar el marcador existente del mapa y crear uno nuevo
 var marker; function displayLocation(location) { console.log(location.lat) var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng)); if (marker && marker.setMap) { // if the marker already exists, remove it from the map marker.setMap(null); } // create a new marker, keeping a reference marker = new google.maps.Marker({ map: map, position: position, title: 'test!' }); } 

Deberías hacer

 map.addMarker(new MarkerOptions() .position(new LatLng(parseFloat(location.lat), parseFloat(location.lng))) .title("test!")); 

en la función displayLocation