Дублирование дубликатов Google Карт

Question

Я пытаюсь сделать карту google, используя данные из xml-файлов. Каждое определенное время, я проверяю, есть ли какая-либо новая информация, и поэтому для их отображения. Я создаю полилинию, соединяющую маркеры. Проблема в том, что из-за «setInterval» скрипт создает новую полилинию поверх существующей полилинии.

Вот мой код:

  setInterval(function(){ 
       downloadUrl("xml.php?id="+polyDevID+"&start=0", function(doc) {      
        var xmlDoc = xmlParse(doc); 
        var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
        var path = []; 

        for (var ii = 0; ii < markers.length; ii++) { 
         var points = markers[ii].getElementsByTagName("devid"); 
         // obtain the attributes of each marker 
         var lat = parseFloat(markers[ii].getAttribute("lat")); 
         var lng = parseFloat(markers[ii].getAttribute("lng")); 
         var devID = parseFloat(markers[ii].getAttribute("devid")); 
         var rDate = parseFloat(markers[ii].getAttribute("date")); 
         var TrackID = parseFloat(markers[ii].getAttribute("TrackID")); 
         var point = new google.maps.LatLng(lat,lng); 
         // create the marker 
         var marker = createPointer(point,devID,rDate,TrackID); 

         path.push(point); 

        }              
         // create polyline 
         var polyline = new google.maps.Polyline({ 
          path: path, 
          strokeColor: "#"+pColor, 
          strokeOpacity: 1.0, 
          strokeWeight: 3, 
          icons: [{ 
           icon: direc, 
           offset: '50%', 
           repeat: '100px'}] 
          }); 
          polyline.setMap(map); 


       }); 
      },5000); 

Как я могу избежать этой проблемы, в результате чего ломаная дублироваться и так далее?

Answer 1

В приведенном выше коде, есть:

var polyline = new google.maps.Polyline({ .... 

, что создает новую полилинию и добавляет его к карте каждый раз, когда ваша функция обновления работает. Чтобы избежать »дубликатур« у вас есть два варианта:

1. удалить старую, до/после того, как новый создаются или
2. обновления существующего.

В любом случае вам необходимо сохранить ссылку на (старую/последнюю) полилинию, которую вы создали. это можно сделать вот так (первый вариант):

(function() { 
    var polyline = null; 

    setInterval(function(){ 
     //your code from above until: 

     // remove polyline 
     if (polyline !== null) polyline.setMap(null); 

     // create polyline 
     polyline = new google.maps.Polyline({ 
      path: path, 
      strokeColor: "#"+pColor, 
      strokeOpacity: 1.0, 
      strokeWeight: 3, 
      icons: [{ 
       icon: direc, 
       offset: '50%', 
       repeat: '100px'}] 
      }); 


     polyline.setMap(map); 


    }, 5000) 
})(); 

Для того, чтобы использовать вариант 2 (повторное использование существующей полилинии), это должно работать:

(function() { 
    var polyline = new google.maps.Polyline({ … }); 

    polyline.setMap(map); 

    setInterval(function() { 
     //your code 
     //instead of creating a new line 
     polyline.setPath(path); 


    }, 5000); 

})() 

Polyline Docs on developers.google.com

Я надеюсь, что это помогает!