谷歌地图更新标记位置而不删除它们

Question

我已经初始化谷歌地图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循环并与相关点设置。