google map api ajax reload markers

Question

Мне нужна карта google, чтобы перезагрузить маркеры без перезагрузки всей карты ... для отслеживания цели ..., а также показать/скрыть трафик без повторной загрузки карты ... например. каждые 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 по таймеру.