谷歌地圖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)] 
}