-1

我正在做一个项目，我需要在一段时间内（可能跨越 n 天）跟踪销售人员的移动路线。我从移动设备获取存储的位置，我使用 Web 服务将其保存在数据库中。

现在我有一个用于选择销售人员的多选下拉菜单。我将销售人员 ID 作为逗号分隔值传递，并从数据库中获取选定销售人员的纬度和经度。

代码如下。

IList<RadComboBoxItem> Values = rcbSalesPersons.CheckedItems;
string Ids = String.Join(",", rcbSalesPersons.Items.Where(i => i.Checked).Select(i => i.Value).ToList());
List<SalespersonSpatialInfo> lstSpatialInfo = SalespersonSpatialInfo.getSpatialInfo(Ids, Session["StoreID"].ToString(),RadDatePickerFrom.SelectedDate.Value, RadDatePickerTo.SelectedDate.Value);
string jsonString;
if (lstSpatialInfo.Count > 0)
{
jsonString = JsonSerializer<List<SalespersonSpatialInfo>>(lstSpatialInfo);
ScriptManager.RegisterArrayDeclaration(Page, "markers", jsonString);
ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), "GoogleMap();", true);
            }

当我在页面的源代码中注册了 javascript Markers 数组时，现在我使用以下 javascript 函数在地图上绘制点并加入它们

function GoogleMap() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0][0].Latitude, markers[0][0].Longitude),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();

            for (i = 0; i < markers[0].length; i++) {
                var data = markers[0][i];
                var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);

            //***********ROUTING****************//

            //Initialize the Path Array
            var path = new google.maps.MVCArray();

            debugger;

            //Initialize the Direction Service
            var service = new google.maps.DirectionsService();

            //Set the Path Stroke Color
            var poly = new google.maps.Polyline({ map: map, strokeColor: '#489615' });

            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i < lat_lng.length; i++) {
                if ((i + 1) <= lat_lng.length) {
                    var src = lat_lng[i];
                    var des = lat_lng[i + 1];
                    path.push(src);
                    poly.setPath(path);
                    service.route({
                        origin: src,
                        destination: des,
                        travelMode: google.maps.DirectionsTravelMode.TRANSIT
                    }, function (result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                path.push(result.routes[0].overview_path[i]);
                            }
                        }
                    });
                }
            }
        }

我得到以下json

    [
    {
        "DeviceID": null,
        "ID_SalesRep": 58,
        "Latitude": 22.693519,
        "LocationID": 1,
        "Longitude": 75.919796,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 58,
        "Latitude": 22.701211,
        "LocationID": 2,
        "Longitude": 75.926846,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 59,
        "Latitude": 22.750948,
        "LocationID": 3,
        "Longitude": 75.895411,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 58,
        "Latitude": 22.705804,
        "LocationID": 4,
        "Longitude": 75.905024,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 58,
        "Latitude": 22.711267,
        "LocationID": 5,
        "Longitude": 75.883073,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 58,
        "Latitude": 22.718155,
        "LocationID": 6,
        "Longitude": 75.883802,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 59,
        "Latitude": 22.747032,
        "LocationID": 7,
        "Longitude": 75.883727,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 58,
        "Latitude": 22.726512,
        "LocationID": 8,
        "Longitude": 75.880881,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    },
    {
        "DeviceID": null,
        "ID_SalesRep": 59,
        "Latitude": 22.718927,
        "LocationID": 9,
        "Longitude": 75.856036,
        "StoreID": "xyz",
        "TrackingTime": "/Date(1418246100000+0530)/"
    }
]

完成后，我还需要为不同的销售人员更改标记和折线的颜色。

现在的问题是，我需要为不同的销售人员显示不同的路线，但它显示了连接两个销售人员位置的单一路线。如果需要，请要求澄清。

4

1 回答 1

0

最后我使用以下服务器和客户端逻辑让它工作

在服务器端，我在结果集中创建了属于每个销售人员的多个位置数组

C＃

IList<RadComboBoxItem> Values = rcbSalesPersons.CheckedItems;
            string Ids = String.Join(",", rcbSalesPersons.Items.Where(i => i.Checked).Select(i => i.Value).ToList());
            //List<SalespersonSpatialInfo> lstSpatialInfo = SalespersonSpatialInfo.getSpatialInfo(Ids, Session["StoreID"].ToString(), new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1), DateTime.Now);
            List<SalespersonSpatialInfo> lstSpatialInfo = SalespersonSpatialInfo.getSpatialInfo(Ids, Session["StoreID"].ToString(), RadDatePickerFrom.SelectedDate.Value, RadDatePickerTo.SelectedDate.Value);
            var distinctSalespersons = lstSpatialInfo.Select(t => t.ID_SalesRep).Distinct().ToList();
            string jsonString;
            hdnMarkerArraySuffix.Value = "";
            if (lstSpatialInfo.Count > 0)
            {
                for (int i = 0; i < distinctSalespersons.Count; i++)
                {
                    List<SalespersonSpatialInfo> lstMarkers = lstSpatialInfo.Where(o => o.ID_SalesRep == distinctSalespersons[i]).ToList();
                    jsonString = JsonSerializer<List<SalespersonSpatialInfo>>(lstMarkers);
                    ScriptManager.RegisterArrayDeclaration(Page, "markers"+distinctSalespersons[i].ToString(), jsonString);
                    hdnMarkerArraySuffix.Value +=  distinctSalespersons[i] + ",";
                }
                ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), "GoogleMap();", true);



            }

请注意，我使用销售人员 ID 后缀来区分销售人员位置数组，我将这些 ID 后缀存储在隐藏字段中，以便稍后在绘制标记和折线时处理它们。

当从多选下拉Javascript中选择多个销售人员时，放置标记并加入它们的客户端代码 

 function GoogleMap() {

            var MarkerArrayNamesCSV = $('#<%=hdnMarkerArraySuffix.ClientID%>').val();
            if (MarkerArrayNamesCSV.charAt(MarkerArrayNamesCSV.length - 1) == ",") {
                MarkerArrayNamesCSV = MarkerArrayNamesCSV.slice(0, -1);
            }
            var MarkerArrayNames;
            if (MarkerArrayNamesCSV.indexOf(',') > 0) {
                MarkerArrayNames = MarkerArrayNamesCSV.split(',');
            }
            else {
                MarkerArrayNames = new Array();
                MarkerArrayNames.push(MarkerArrayNamesCSV);
            }

            var map;
            for (k = 0; k < MarkerArrayNames.length; k++) {

                var mapOptions = {
                    center: new google.maps.LatLng(window['markers' + MarkerArrayNames[k]][0][0].Latitude, window['markers' + MarkerArrayNames[k]][0][0].Longitude),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                if (typeof map == 'undefined') {
                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                }

                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < window['markers' + MarkerArrayNames[k]][0].length; i++) {
                    var data = window['markers' + MarkerArrayNames[k]][0][i];

                    var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
                    lat_lng.push(myLatlng);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map
                    });
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);

                }

                //    map.setCenter(latlngbounds.getCenter());
                //   map.fitBounds(latlngbounds);

                //***********ROUTING****************//

                //Initialize the Path Array
                var path = new google.maps.MVCArray();



                //Initialize the Direction Service
                var service = new google.maps.DirectionsService();

                //Set the Path Stroke Color
                var poly = new google.maps.Polyline({ map: map, strokeColor: '#489615' });


                //Loop and Draw Path Route between the Points on MAP
                try {
                    for (var i = 0; i < lat_lng.length; i++) {
                        if ((i + 1) < lat_lng.length) {
                            var src = lat_lng[i];
                            var des = lat_lng[i + 1];
                            path.push(src);
                            poly.setPath(path);
                            service.route({
                                origin: src,
                                destination: des,
                                travelMode: google.maps.DirectionsTravelMode.TRANSIT
                            }, function (result, status) {
                                try {
                                    if (status == google.maps.DirectionsStatus.OK) {
                                        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                            path.push(result.routes[0].overview_path[i]);
                                        }
                                    }
                                }
                                catch (ex1) {
                                    alert('callback' + i);
                                }
                            });
                        }
                        else {
                            var src = lat_lng[i];
                            var des = lat_lng[i];
                            path.push(src);
                            poly.setPath(path);
                            service.route({
                                origin: src,
                                destination: des,
                                travelMode: google.maps.DirectionsTravelMode.TRANSIT
                            }, function (result, status) {
                                try {
                                    if (status == google.maps.DirectionsStatus.OK) {
                                        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                            path.push(result.routes[0].overview_path[i]);
                                        }
                                    }
                                }
                                catch (ex1) {
                                    alert('callback' + i);
                                }
                            });
                        }
                    }
                }
                catch (ex) {
                    alert(i);
                }

            }
        }

请注意，我循环遍历循环中的可用标记数组，然后循环遍历集合以放置标记并使用折线对象连接它们

虽然这可能是非常具体的问题，但我发布了我的解决方案，以防将来有人遇到这个问题。

于 2014-12-31T06:32:51.690 回答