谷歌地图api阿贾克斯重新加载标记

Question

我需要谷歌地图重新加载标记无重新加载整个地图...用于跟踪目的....以及显示/隐藏交通没有再次加载地图... 例如。每15秒刷新标记，因此更新位置...

这里是我的代码

function loadmap2(i) { 
    var map = new google.maps.Map(document.getElementById("map2"), { 
    center: new google.maps.LatLng(40.742575,-73.874932), //40.671037,-73.991976 40.710313,-73.858452 
    zoom: 11, 
    mapTypeId: 'roadmap' 
    }); 

if (i == 'traffic') {traffic();} else {}; 

function traffic() { 
var trafficLayer = new google.maps.TrafficLayer(); 
trafficLayer.setMap(map); 
} 
    var infoWindow = new google.maps.InfoWindow; 
    // Change this depending on the name of your PHP file 
    downloadUrl("markers_trucks_xml.cfm?date=<cfoutput>#URL.date#</cfoutput>", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
    var id = markers[i].getAttribute("id"); 
var icon = markers[i].getAttribute("icon");//icon 
    var color = markers[i].getAttribute("color");//color 
var type = markers[i].getAttribute("type"); 
var data1 = markers[i].getAttribute("data1"); 
    var data2 = markers[i].getAttribute("data2"); 
    var data3 = markers[i].getAttribute("data3"); 
    var data4 = markers[i].getAttribute("data4"); 
    var data5 = markers[i].getAttribute("data5"); 
    var data6 = markers[i].getAttribute("data6"); 
    var data7 = markers[i].getAttribute("data7"); 
    var data8 = markers[i].getAttribute("data8"); 
    var data9 = markers[i].getAttribute("data9"); 
    var data10 = markers[i].getAttribute("data10"); 

    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
var ind = i; 
var ind= ind + 1; 
if(type == 'truck') 
{ 
var html = "<b><a href='da.cfm?id="+id+"'>"+data1+"</a></b><br />"+"Order # <b>"+data2+" &nbsp;&nbsp;"+data3+"</b> <i>lbs</i><br />" + "<br/><br/>" + data5 + "<br />" + data6 + "<br/>" + data7 + "<br/>" + data8 +"<br />"+ data9; 
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|"+icon+"|"+color+"|000000"; 
} 
else if(type == 'track') 
{ 
var html = "<b><a href='da1.cfm?id="+id+"'>"+data1+"</a></b><br />"+"<b>"+data3+"</b>&nbsp;MPH&nbsp;-&nbsp;Engine&nbsp;<b>"+data7+"</b><br /><br/>Last Read&nbsp;" + data4 + "<br />Stop Duration&nbsp;" + data5 + "<br/>Recent Movement&nbsp;" + data6 + "<br/>Location&nbsp;" + data8 +"&nbsp;&nbsp;"+ data9; 
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|"+icon+"|"+color+"|000000"; 
} 

var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon, 
    title: data1, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    }; 


    }); 

}; 


function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

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() {} 

// This function picks up the click and opens the corresponding info window 
    function myclick(i) { 
    gmarkers[i].openInfoWindowHtml(htmls[i]); 
    } 

Answer 1

您需要模块化代码 - 有一个函数来绘制地图，函数加载数据，函数来初始绘制标记（并填充全局标记数组）和更新标记位置的函数。最终你想要将所有的标记对象存储在一个数组中。后来您使用数组作为参考，当你想更新标记位置（您不必清除标记或重新初始化地图）这个代码的执行

//your global marker array for storing marker objects 
    var globalMarkers; 

    function init() { 
    //initialise your map 

//draw the initial set of markers 
drawMarkers(); 
    } 
    function loadData() { 
    //define return array 
    var data = []; 

    //load your data here 
    //loop through data as you do 

    //store marker points 
    data[i].point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 

    //add other data if you wish 

    //return a simple array of marker data - do not add them to the map yet 
    return data; 
    } 

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

    var marker = new google.maps.Marker({ 
      map: map, 
      position: markers[i].point, 
      icon: icon, 
     title: data1, 
      shadow: icon.shadow 
      }); 
    } 
    //save your marker in a global array for updating later 
    globalMarkers.push(marker); 
    } 

    //this function updates position of markers with new data - you will be calling this one on a timer 
    function updateMarkers() { 
//load new data 
data = loadData(); 
    //loop through array of marker objects and update their position with new data 
    for (var i=0;i<globalMarkers.length;i++) { 
    globalMarkers[i].setPosition(data[i].point); 
    } 

    } 

顺序应该是 上载文件init（）映射，以后只能在定时器上调用updateMarkers。