API V3动态更新标记位置 [英] API V3 Update marker position dynamically

问题描述

我有这段代码从xml文件中读取数据并将标记放在地图上。

I have this code that reads data from an xml file and puts the marker on the map.

我想要做的就是自动读取xml文件5秒，所以更新标记的位置。

What i want to do is to read the xml file automatically every 5 seconds, and so update the position of the marker.

我尝试在函数中添加setInterval，但问题在于上一个标记未被删除。只需在地图上添加另一个标记等。

I tried adding setInterval to the function, but the problem is that the previous marker is not deleted. Just add another marker to the map and so on.

（我不希望整个地图更新，只是标记）

(I dont want the entire map updated, just the marker)

<script type="text/javascript"> 


var map = null;



function createMarker(latlng, html) {
var contentString = html;

var image = new google.maps.MarkerImage('http://www.google.com/mapfiles/markerA.png',
new google.maps.Size(20, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));

var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));

var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: shadow,
icon: image,
zIndex: Math.round(latlng.lat()*-100000)<<5


});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString); 
infowindow.open(map,marker);

});

}




function initialize() {

var myOptions = {
zoom: 13,
center: new google.maps.LatLng(-18.432713,-70.317993),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);



google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});



setInterval(function() { 
downloadUrl("data.xml", function(doc) {

var xmlDoc = xmlParse(doc);

var markers = xmlDoc.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {

var lat = parseFloat(markers[i].getAttribute("lat"));

var lng = parseFloat(markers[i].getAttribute("lng"));

var point = new google.maps.LatLng(lat,lng);

var html = "<strong>Taxi Arica</strong></br><strong>Latitud:</strong> " +       markers[i].getAttribute("lat") + "</br><strong>Longitud:</strong> " +  markers[i].getAttribute("lng");

var marker = createMarker(point,html);

}

});

},5000);


}



var infowindow = new google.maps.InfoWindow(
{size: new google.maps.Size(150,50)});


</script> 

推荐答案

要更新标记的位置， setPosition：

To update the position of a marker, you should call setPosition:

   var new_marker_position = new google.maps.LatLng(53.345735, -6.259548);

   marker.setPosition(new_marker_position);

这篇关于API V3动态更新标记位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！