Google Maps Обновление позиции маркера без удаления их

Question

Я инициализировал google maps api v3 и с помощью setInterval перезагрузил список маркеров xml и отобразил их на карте, поэтому я могу обновлять местоположения маркеров в реальном времени на карте и даже показывать они двигаются.

В основном это достигается путем удаления всех маркеров, а затем их повторного создания при каждой повторной загрузке с новыми данными.

То, что я хочу достичь в этом коде, заключается в том, чтобы вместо маркеров удаления обновлять свои позиции. Это должно помочь устранить мерцание при каждой перезагрузке страницы. Я нашел другие ответы, которые не помогли мне определить путь Я сделал это.

Другая вещь, В настоящее время я меняю значок или изображение маркеров, как показано ниже, на основе определенного значения курса. Как я могу изменить его, чтобы иметь несколько условий, например, если курс x = image = x.jpg (так далее) здесь я хочу даже определить, будет ли скорость = x, а затем изображение xy.jpg, так что всего два вопроса.

<script> 
// COUNTER 
var k=1; 
function myFunction() 
{ 
setInterval(function(){ 
document.getElementById('spanSecond').innerHTML=10-k; 
k++; 
if(k>10){ k=1; timeout(); } 
},1000); 
} 
myFunction(); 

var num=<?php echo $num;?>; 
// In the following example, markers appear when the user clicks on the map. 
// The markers are stored in an array. 
// The user can then click an option to hide, show or delete the markers. 
var map; 
var markers = []; 

function initialize() { 
    var haightAshbury = new google.maps.LatLng(<?php echo $cLat;?>, <?php echo $cLong; ?>); 
    var mapOptions = { 
    zoom: 5, 
    center: haightAshbury, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 



timeout();  
} 


function timeout() { 


downloadUrl("all__xml.php?UID=1", function(data) { 
     var xml = data.responseXML; 
     deleteMarkers(); 
     var markers = xml.documentElement.getElementsByTagName("marker");  

     for (var i = 0; i < markers.length; i++) { 
       var name = markers[i].getAttribute("name"); 
       var course = markers[i].getAttribute("course"); 
       var dt_image = markers[i].getAttribute("dt_image"); 
       var time = markers[i].getAttribute("deviceTime"); 
       var speed = markers[i].getAttribute("speed"); 
       var label = markers[i].getAttribute("deviceId"); 
       var tdiff = markers[i].getAttribute("tdiff"); 
      var Lat=parseFloat(markers[i].getAttribute("lat")); 
      var Lng=parseFloat(markers[i].getAttribute("lng")); 
      var point = new google.maps.LatLng(Lat,Lng); 

    if(tdiff>=2) 
    { 
    var Acc="Off"; 
    speed=0; 
    } 
    else var Acc="On"; 

    // data sending stop before 2 min => Acc off 
    if(speed>1) { 
    var status=Math.round(speed*1.852) + " moving"; 
    } 
    else { 
    var status="stopped"; // moving status according to speed 
    speed=0; 
    } 

    var html ='<div style="margin:1px !important; font-size:12px;">' + "<b>" + name + "</b> <br/>Angle : " + course + "<br/> Last Updated : " + time + "<br/> Acc : " + Acc + "<br/> Speed : " + Math.round(speed*1.852) + " kmph<br/>Lat : " + Lat + "<br/>Lng : " + Lng + "<br/>" + "<a href=tracking.php?DID=" + label + ">Tracking</a>" + " " + "<a href=playback.php?PlayBackDeviceId=" + label + "&Reset=1>Play Back</a>" + " " + "<a href=daily_distance_report.php?vehicle="+ label +">Reports</a>" + " " + "<a href=draw_geo_fence.php?deviceid="+ label+"&mapLat="+ Lat +"&mapLong="+ Lng +">Geo-Fence</a>" + '</div>' ; 

//document.getElementById("status"+label).innerHTML=status; // show status in div tag 



// Add a marker when click on the map 

    addMarker(point,dt_image,course,html,name,i); 

      }// loop end here  


    }); // downloadUrl end here 
} 

// Add a marker to the map and push to the array. 
function addMarker(location,image,course,html,name,i) { 
    if(course<=22.5) 
     { 
      image = "images/"+image+"0.png"; // 0 angle img 
     } 
     else if (course<=67.5) 
     { 
      image = "images/"+image+"45.png"; // 45 angle img 
     } 
     else if (course<=112.5) 
     { 
      image = "images/"+image+"90.png"; // 90 angle img 
     } 
     else if (course<=157.5) 
     { 
      image = "images/"+image+"135.png"; // 135 angle img 
     } 
     else if (course<=202.5) 
     { 
      image = "images/"+image+"180.png"; // 180 angle img 
     }  
     else if (course<=247.5) 
     { 
      image = "images/"+image+"225.png"; // 225 angle img 
     } 
     else if (course<=292.5) 
     { 
      image = "images/"+image+"270.png"; // 270 angle img 
     }  
     else 
     { 
      image = "images/"+image+"315.png"; // 315 angle img 
     } 



    var marker = new MarkerWithLabel({ 
    position: location, 
    icon:image, 
    labelContent: name, 
    labelAnchor: new google.maps.Point(22, 0), 
    labelClass: "labels", // the CSS class for the label 
    labelStyle: {opacity: 0.75}, 
    map: map  
    }); 

var infoWindow = new google.maps.InfoWindow({maxWidth:400}); 
google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
markers.push(marker); 


} 

// Sets the map on all markers in the array. 
function setAllMap(map) { 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(map); 
    // Try update value here 
    } 
} 

// Deletes all markers in the array by removing references to them. 
function deleteMarkers() { 
    setAllMap(null); 
    markers = []; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
     }; 


     request.open('GET', url, true); 
     request.send(null); 

    } 
    function doNothing() {} 



/////////////////////////////////////////////////////////////// 

var geocoder = new google.maps.Geocoder(); 
//get geo location by name 
function GetAddressByGoogle(t, lat, lng) { 
    if (!geocoder) { 
     geocoder = new google.maps.Geocoder(); 
    } 
    if (lat != 0) { 
     var latlng = new google.maps.LatLng(lat, lng); 
     geocoder.geocode({ 'latLng': latlng }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[0]) { 
      document.getElementById(t).innerHTML=results[0].formatted_address; 
       } 
      } 
     }); 
    } 
} 




</script> 

Answer 1

попробовать с marker.setPosition:

var point = new google.maps.LatLng(Lat,Lng); 
marker.setPosition(point); 

, если у вас есть несколько цикл murkers через каждый маркер и установить его с соответствующей точкой.