我正在开展一个项目，我需要跟踪销售人员在一段时间内的行动路线（可能跨越n天）。我从移动设备获取存储的位置，我使用网络服务保存在数据库中。
现在我有一个多选下拉列表来选择销售人员。我将销售人员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)/"
}
]
我还需要在完成此操作后更改不同销售人员的标记和折线的颜色。
现在的问题是，我需要为不同的销售人员显示不同的路线，但它显示了连接两个销售人员的位置的单一路线。 如果需要，请要求澄清。
答案 0 :(得分：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);
}
注意我使用salesperson id后缀来区分销售人员位置数组，我将这些ID后缀存储在hiddenfield中，以便稍后在绘制标记和折线时处理它们。
客户端代码，用于放置标记并在从多选下拉列表中选择多个销售人员时加入标记 的的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);
}
}
}
注意我循环遍历循环中的可用标记数组，然后遍历集合以放置标记并使用折线对象连接它们
虽然这可能是一个非常具体的问题，但我发布了我的解决方案以防将来有人面对这个问题。