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

Google从XML映射多条折线

1 个答案: