谷歌地图XML中的多段折线

Question

我目前在如何制作多段折线时遇到了一些麻烦。我将多个用户及其当前和以前的位置存储到数据库中。我的问题是，当我输入另一个用户时，第一个用户的折线连接到另一个用户。

的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

现在你遍历所有标记，为他们创造了所有的单一路径。
而是设置一个变量来存储每个不同的用户，并为每个用户分配一个路径。
然后循环，为每个用户绘制一条折线。事情是这样的：

// 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 
    }); 
} 

你应该与最终的变量users看起来像：

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