我已初始化google地图api v3并使用setInterval重新加载xml标记列表并在地图上显示它们，因此我可以在地图上实时更新标记位置，甚至可以显示它们移动。
这基本上是通过删除所有标记然后在每次重新加载时使用新数据重新创建它们来实现的。
我想在这段代码中实现的是，而不是删除标记，更新它们的poisitions，这应该有助于消除每个页面重新加载时的闪烁，我确实找到了其他答案，这对我的具体方式没有帮助已经做到了。
另一件事是，目前我正在更改下面显示的标记图标/图像，基于某个课程值，如何将其更改为具有多个条件，例如课程x = image = x.jpg（等等）在这里，我想甚至定义如果speed = x然后是image 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>
答案 0 :(得分：0)
尝试使用marker.setPosition：
var point = new google.maps.LatLng(Lat,Lng);
marker.setPosition(point);
如果您有多个谋杀者遍历每个标记并将其设置为相关点。