Google Maps Mehrere Polylinien aus XML

Question

Ich habe derzeit einige Probleme herauszufinden, wie man mehrere Polylinien machen. Ich habe mehrere Benutzer und deren aktuelle und vorherige Standorte in einer Datenbank gespeichert. Mein Problem ist, wenn ich einen anderen Benutzer eintrug, verbindet sich die Polylinie des ersten Benutzers mit einem anderen Benutzer.

Javascript:

function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(14.5514177, 121.0085608), 
      zoom: 12 
     }); 
     var infoWindow = new google.maps.InfoWindow; 


     // Change this depending on the name of your PHP or XML file 
     downloadUrl('assets/connections/connection-gmaps.php', function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName('marker'); 

      var path = []; 

      for (var i = 0; i < markers.length; i++) { 
      var lat = parseFloat(markers[i].getAttribute("latitude")); 
      var lng = parseFloat(markers[i].getAttribute("longitude")); 
      var point = new google.maps.LatLng(lat,lng); 
      var a = path.push(point); 
      console.log(a); 



      } 

      var polyline = new google.maps.Polyline({ 
      path: path, 
      strokeColor: "#FF0000", 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
      }); 
      polyline.setMap(map); 


      Array.prototype.forEach.call(markers, function(markerElem) { 
       var id = markerElem.getAttribute('id'); 
       var sender = markerElem.getAttribute('sender'); 
       var firstname = markerElem.getAttribute('client_firstname'); 
       var middlename = markerElem.getAttribute('client_middlename'); 
       var lastname = markerElem.getAttribute('client_lastname'); 
       var created_date = markerElem.getAttribute('created_date'); 
       var lat = parseFloat(markerElem.getAttribute('latitude')); 
       var lng = parseFloat(markerElem.getAttribute('longitude')); 
       var point = new google.maps.LatLng(lat,lng); 



       var infowincontent = document.createElement('div'); 
       var strong = document.createElement('strong'); 
       strong.textContent = firstname + ' ' + middlename + ' ' + lastname 
       infowincontent.appendChild(strong); 
       infowincontent.appendChild(document.createElement('br')); 

       var text = document.createElement('text'); 
       text.textContent = sender 
       infowincontent.appendChild(text); 
       /*var icon = customLabel[created_date] || {};*/ 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        /*label: icon.label*/ 
       }); 
       marker.addListener('mouseover', function() { 
        infoWindow.setContent(infowincontent); 
        infoWindow.open(map, marker); 
       }); 
      }); 
     }); 
    } 

XML:

<markers> 
<marker id="2" latitude="14.574072" longitude="120.993150" created_date="2017-05-09 01:00:00" firstname="User1" middlename="User1" lastname="User1" status="1" /> 
<marker id="3" latitude="14.573273" longitude="120.992142" created_date="2017-05-09 01:05:00" firstname="User1" middlename="User1" lastname="User1" status="1" /> 
<marker id="5" latitude="14.572733" longitude="120.990382" created_date="2017-05-09 01:10:00" firstname="User1" middlename="User1" lastname="User1" status="1" /> 
<marker id="6" latitude="14.558147" longitude="121.005357" created_date="2017-05-09 01:05:00" firstname="User2" middlename="User2" lastname="User2" status="1" /> 
</markers> 

Answer 1

Gerade jetzt Sie Schleife über alle Markierungen, die alle einen einzigen Weg für sie zu schaffen.
Richten Sie stattdessen eine Variable ein, um jeden einzelnen Benutzer mit einem Pfad für jeden Benutzer zu speichern.
Dann Schleife über das, Zeichnen einer Polylinie für jeden Benutzer. Etwas wie folgt aus:

// this will end up being an object keyed on user ID, with a different path for each user 
var users = {}; 

for (var i = 0; i < markers.length; i++) { 
    var userId = markers[i].getAttribute("lastname"); 
    var lat = parseFloat(markers[i].getAttribute("latitude")); 
    var lng = parseFloat(markers[i].getAttribute("longitude")); 
    var point = new google.maps.LatLng(lat,lng); 

    if (userId in users) { 
     users[userId].push(point); 
    } else { 
     users[userId] = [point]; 
    } 
} 

// now loop over all the users, drawing a new polyline for each one: 
for (userId in users) { 
    var polyline = new google.maps.Polyline({ 
     map: map, 
     path: users[userId], 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 
} 

Was Sie ist am Ende sollten suchen die Variable users wie:

{ 
    User1: [ 
     new google.maps.LatLng(14.574072, 120.993150), 
     new google.maps.LatLng(14.573273, 120.992142), 
     new google.maps.LatLng(14.572733, 120.990382) 
    ], 
    User2: [new google.maps.LatLng(14.558147, 121.005357)] 
}