각 영업 사원을위한 Google지도에서 다른 경로를 표시하는 방법

Question

나는 특정 기간 동안 영업 사원의 이동 경로를 추적해야하는 프로젝트에서 작업 중입니다 (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); 
      } 

, 지금은 내가 JSON

다음 얻을지도에 점을 음모하고 그들에게

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

가입 자바 스크립트 함수를 다음을 사용

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

마침내 다른 영업 사원에 대한 마커와 폴리 라인의 색상을 변경해야합니다.

이제 문제는 다른 영업 사원에 대해 다른 경로를 표시해야하지만 두 경로 모두 영업 사원을위한 하나의 경로를 보여주는 것입니다. 필요한 경우 설명을 요청하십시오.

Answer 1

마침내 나는 결과 집합 내의 각 판매원에 속하는 위치의 N 여러 배열을 만들었다는 서버 측에서 다음 서버와 클라이언트 측 논리

를 사용하여 작업을 진행

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에 저장하여 나중에 마커 및 폴리 라인을 플로팅 할 때 처리합니다.

자바 스크립트 스루

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

      } 
     } 

공지 사항 난에 루프에서 사용 가능한 마커 배열을 반복하고 루프를 마커를 배치하고 여러 영업 사원이 다중 선택 드롭 다운에서 선택하면 그들과 합류하기 위해 클라이언트 측 코드 마커를 배치하고 폴리 라인 객체를 사용하여 컬렉션에 가입하는 컬렉션

이것은 매우 특정한 문제 일 수 있지만 앞으로 누군가이 문제에 직면 할 경우를 대비하여 솔루션을 게시했습니다.