谷歌相关功能

var map = null;
var MAP_CENTER_LAT = 51.518345;
var MAP_CENTER_LNG = 8.4208345;
var StationMarkerArr = new Array();
var OrderMarkerArr = new Array();

var service;
var directionsDisplayArray =new Array() ;
var directionsDisplay ;
var table1 ;
var staffTable = null;

var staionMarker=new Object();
var staffMarkers=new Array();
var staffMarkerStaffs = new Array();


var stationPostion;

$(function() {
    // 初始化地图
    try{
        var defaultZoom = 10;
        var mapProp = {
            center : new google.maps.LatLng(MAP_CENTER_LAT, MAP_CENTER_LNG),
            zoom : defaultZoom,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("wfm_gmap"), mapProp);
        
        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true ,suppressInfoWindows:true,suppressMarkers:true});
        
        google.maps.event.addListener(map, 'zoom_changed', function () {
            if (map.getZoom() > defaultZoom){
                map.setZoom(defaultZoom);
            }
        });
    }catch(err){
        alert("google map initialize failed: <br>"+err);
    }
    
    table1 =  $('#example').DataTable({
        "bPaginate": true, //翻页功能
        "bLengthChange": true, //改变每页显示数据数量
        "bSort": false, //排序功能
        "bInfo": true,//页脚信息
        "autoWidth": false,
        "sScrollY":"450px",
        "sScrollX": "100%",
        "aoColumns": [
            {"mData": "ROW_SEQ","sTitle":"SEQ"},
              {"mData": "WORK_ITEM","sTitle":"workitem"},
              {"mData": "ORD_NO","sTitle":"ord_no"},
              {"mData": "TASK_TITLE","sTitle":"task_title","defaultContent":""},
              {"mData": "WORKORDER_NO","sTitle":"WORKORDER_NO","defaultContent":""},
              {"mData": "STATION_ID","sTitle":"STATION_ID","defaultContent":""},
              {"mData": "NE_ID","sTitle":"NE_ID","defaultContent":""}
        ],
        "bProcessing": true,
        "paging": true,
        "searching": true,
          "ordering": true,
          "bScrollInfinite": true,
          "bScrollCollapse": true,
          "renderer": "bootstrap",
          "deferRender": true,
          "showRowNumber": true,
          "pagingType": "simple",
          "aLengthMenu": [50,100,150],
          "sAjaxSource": ctx+"/gisDispatch/searchWorkOrder.do",
          "fnServerData": function ( sSource, aoData, fnCallback ) {
          $.ajax( {
              "dataType": 'json',
              "type": "POST",
              "url": sSource,
              "data": aoData,
              "success": function(data){
                  var aaData = data;
                  initMapData(data);
                  fnCallback(aaData);
              }
          });
       }
    });
    
    staffTable = $('#example2').DataTable({
        "bSort": false, //排序功能
        "bInfo": false,//页脚信息
        "paging": false,
        "autoWidth": false,
        "sScrollY":"450px",
        "sScrollX": "100%",
        "aoColumns": [
            {"mData": "ROW_SEQ","sTitle":"SEQ"},
              {"mData": "STAFF_NAME","sTitle":"STAFFNAME"},
              {"mData": "DISTANCE","sTitle":"DISTANCES"},
              {"mData": "ORD_NUM","sTitle":"ORDER_NUMBER"},
              {"mData": "STAFF_ID","sTitle":"STAFF_ID","visible":false}
              
        ],
        "searching": false,
          "ordering": true,
          "bScrollCollapse": true,
          "renderer": "bootstrap",
          "deferRender": true,
          "sAjaxSource": ctx+"/gisDispatch/searchTeamStaff.do",
          "fnServerData": function ( sSource, aoData, fnCallback ) {
              var paramData = table1.row().data();
              if(!paramData){
                  return;
              }
              aoData.push({name:"NE_ID",value:paramData.NE_ID});
              aoData.push({name:"LATITUDE",value:paramData.LATITUDE});
              aoData.push({name:"LONGITUDE",value:paramData.LONGITUDE});
              $.ajax( {
                  "dataType": 'json',
                  "type": "POST",
                  "url": sSource,
                  "data": aoData,
                  "success": function(data){
                      
                      if(!!staionMarker.marker){
                          staionMarker.marker.setMap(null);
                      }
                      if(!!staionMarker.markerlabel){
                          staionMarker.markerlabel.clear();
                      }
                      staionMarker = new Object();
                      
                      func_cleanMarkers(staffMarkers);
                      staffMarkers = new Array();
                      
                      var markerPos = new google.maps.LatLng(StationMarkerArr[paramData.STATION_ID].lati, StationMarkerArr[paramData.STATION_ID].lngi);
                      stationPostion = markerPos;
                      var marker = new google.maps.Marker({
                          position : markerPos,
                          animation : google.maps.Animation.DROP,
                          draggable : false,
                          cursor : 'hand',
                          title:paramData.WORKORDER_NO,
                          icon:ctx+'/google/cabin.png'
                      });
                      
                      staionMarker.marker=marker;
                      staionMarker.markerlabel = new MarkerLable(marker.position, marker.title, map);
                      staionMarker.marker.setMap(map);
                      staionMarker.markerlabel.show();
                      var bounds = new google.maps.LatLngBounds();
                      bounds.extend(markerPos);
                      map.panToBounds(bounds);
                      map.setCenter(markerPos);
                      
                      for(var i in data.aaData){
                          var staffmarkerPos = new google.maps.LatLng(data.aaData[i].LATITUDE,data.aaData[i].LONGITUDE);
                          var staffmarkId = data.aaData[i].STAFF_ID;
                          var staffmarker = new google.maps.Marker({
                              position : staffmarkerPos,
                              animation : google.maps.Animation.DROP,
                              draggable : false,
                              cursor : 'hand',
                              title:data.aaData[i].STAFF_NAME,
                              icon:ctx+'/google/normal-staff.png',
                              
                          });
                          var sm = new Object();
                          sm.marker=staffmarker;
                          sm.markerlabel = new MarkerLable(staffmarker.position, staffmarker.title, map);
                          sm.marker.setMap(map);
                          sm.markerlabel.show();
                          //重新添加标记就将分派按钮置为不可用
                          disabledAssginBtn();
                          (function (staffmarker,markerlable,staffmarkId) {
                              google.maps.event.addListener(staffmarker, 'click', function() {
                                  //将分派按钮置为可用
                                  undisabledAssginBtn();
                                  //规划路线图
                                  getRoute(staffmarker.position,marker.position,map);
                                  //得到详情
                                  getDetailsRoutes(staffmarker.position,marker.position,map);
                                  //显示对话框
                                  $('#siteinfo_modal').modal('show');
                                  //改变颜色 变红
                                  markerlable.changeColor('red');
                                  //把其他颜色改为蓝色
                                  changeColorBlue(staffMarkers,staffmarker);
                                  //表格联动
                                  changeTableSelect(staffmarkId);
                              });
                          })(sm.marker,sm.markerlabel,staffmarkId);
                          
                          staffMarkerStaffs[data.aaData[i].STAFF_ID]=sm;
                          staffMarkers.push(sm);
                          var bounds = new google.maps.LatLngBounds();
                          bounds.extend(staffmarkerPos);
                          map.panToBounds(bounds);
                      }
                      fnCallback(data);
                  }
              });
       }
    });
    
    $('#example tbody').on('mousedown', 'tr', function (e) {
        if(3 == e.which){
          if ( $(this).hasClass('selected') ) {
          }else {
            table1.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
          }
        }else if(1 == e.which){
          if ( $(this).hasClass('selected') ) {
          } else {
            table1.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
          }
        }
    });
    
    
    //staffTable的选中改变颜色
    $('#example2 tbody').on('mousedown', 'tr', function (e) {
        if(3 == e.which){
          if ( $(this).hasClass('selected') ) {
          }else {
              staffTable.$('tr.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        }else if(1 == e.which){
          if ( $(this).hasClass('selected') ) {
          } else {
              staffTable.$('tr.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        }
    });
    
    //表格和图标联动
    function changeTableSelect(staffId){
        var data = $('#example2').DataTable().rows().nodes();
        var data2 = $('#example2').DataTable().rows().data();
        $(data).each(function(index,item){
            if(data2[index].STAFF_ID==staffId){
                $(item).addClass('selected');
            }else{
                $(item).removeClass('selected');
            }
          });
    }
    
    //工单表点击事件
    $('#example tbody').on('dblclick', 'tr', function(e){
        var obj = table1.row($(this)).data();
        loadStaffTable();
        //清除原来规划的路径
        clearRoute();
    });
    
    //staffTable点击事件
    $('#example2 tbody').on('click', 'tr', function(e){
        var objstaff = staffTable.row($(this)).data();
        var staffPostion = new google.maps.LatLng(objstaff.LATITUDE, objstaff.LONGITUDE);
        var staffId = objstaff.STAFF_ID;
        getRoute(staffPostion,stationPostion,map);
        getDetailsRoutes(staffPostion,stationPostion,map);
        $('#siteinfo_modal').modal('show');
        staffMarkerStaffs[staffId].markerlabel.changeColor('red');
        changeColorBlue(staffMarkers,staffMarkerStaffs[staffId].marker);
    });
    
    
    $("#tbar_btn_stationscan").click(function() {
        stationScan();
    });
    
    var mapdiv = document.getElementById("wfm_gmap");
    mapdiv.style.height = (screen.availHeight - 300) + "px";
});

function initMapData(data){
    var aaData = data.aaData;
    StationMarkerArr = new Array();
    for(var i=0;i<aaData.length;i++){
        if(!StationMarkerArr[aaData[i].STATION_ID]){
            StationMarkerArr[aaData[i].STATION_ID] = new Array();
            StationMarkerArr[aaData[i].STATION_ID].name = aaData[i].STATION_NAME;
            StationMarkerArr[aaData[i].STATION_ID].id = aaData[i].STATION_ID;
            StationMarkerArr[aaData[i].STATION_ID].lati = aaData[i].LATITUDE;
            StationMarkerArr[aaData[i].STATION_ID].lngi = aaData[i].LONGITUDE;
            StationMarkerArr[aaData[i].STATION_ID].orderArr = new Array(); 
        }
        StationMarkerArr[aaData[i].STATION_ID].orderArr[aaData[i].WORKORDER_NO] = aaData[i];
    }
}

function showMarkers(){
    
}
var stationMarkers=[];
// 站点查看
function stationScan() {
    // first clear old markers 
    func_cleanMarkers();
    stationMarkers=[];
    var marker = null;
    var infoWindow = new google.maps.InfoWindow(); 
    for ( var i in StationMarkerArr) {
        var markerPos = new google.maps.LatLng(StationMarkerArr[i].lati, StationMarkerArr[i].lngi);
        
        var length = StationMarkerArr[i].orderArr.length;
        var iconpath = '<%=path%>/google/cabin.png';
        if(length > 0){
            if(length <= 10){
                iconpath = '<%=path%>/plugins/google-map/img/m1.png';
            } else if(length > 10 && length <= 50){
                iconpath = '<%=path%>/plugins/google-map/img/m2.png';
            } else if(length > 50 && length <= 100){
                iconpath = '<%=path%>/plugins/google-map/img/m3.png';
            } else if(length > 100 && length <= 200){
                iconpath = '<%=path%>/plugins/google-map/img/m4.png';
            } else {
                iconpath = '<%=path%>/plugins/google-map/img/m5.png';
            }
        }
        
        marker = new google.maps.Marker({
            position : markerPos,
            animation : google.maps.Animation.DROP,
            draggable : false,
            cursor : 'hand',
            _id:i,
            title:StationMarkerArr[i].name,
            icon:iconpath,
            ordernum:length
        });
        stationMarkers[i] = new Array();
        stationMarkers[i].marker=marker;
        stationMarkers[i].markerlable=new MarkerLable(marker.position, marker.title, map);
        marker.setMap(map);
        stationMarkers[i].markerlable.show();
        
        (function (marker) {  
            google.maps.event.addListener(marker, "click", function (e) {  
                infoWindow.setContent("<div style = '200px;min-height:40px'> has" + marker.ordernum+ " records </div>");
                infoWindow.open(map, marker); 
            });  
        })(marker);
    }
    // 调整视阈
    setAutoZoom(map,stationMarkers);
}


function setAutoZoom(gmap,markers){
    var bounds = new google.maps.LatLngBounds();
    for ( var i in stationMarkers) {
        bounds.extend(new google.maps.LatLng(markers[i].marker.getPosition().lat(),markers[i].marker.getPosition().lng()));
    }
    gmap.fitBounds(bounds);
}

// 清理掉站点marker
function func_cleanMarkers(markers) {
    var arrSize = markers.length;
    for ( var i in markers) {
        var marker = markers[i].marker;
        if (marker && marker != null) {
            if(!!markers[i].markerlabel){
                markers[i].markerlabel.clear();
                markers[i].markerlabel = null;
            }
            marker.setMap(null);
        }
    }
}



function reloadWorkOrder(){
    table1.ajax.reload();
    table1.draw();
}


function loadStaffTable(){
    staffTable.ajax.reload();
    staffTable.draw();
}

//分派按钮变灰
function disabledAssginBtn(){
    $("#tbar_btn_assgin").attr("disabled",true);
    $("#i_assgin").attr("class","fa fa-flag-o text-gray");
}

//分派按钮可用
function undisabledAssginBtn(){
    $("#tbar_btn_assgin").attr("disabled",false);
    $("#i_assgin").attr("class","fa fa-flag-o text-blue");
}

//得到规划路线
function getRoute(source,destination,map){
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay.setMap(map);
    var request = {
        origin: source,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

//得到规划路径的详细些信息
function getDetailsRoutes(source,destination,map){
    service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
        origins: [source],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, function (response, status) {
        if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
            var distance = response.rows[0].elements[0].distance.text;
            var duration = response.rows[0].elements[0].duration.text;
            var dvDistance = document.getElementById("siteinfo_modal_label");
            dvDistance.innerHTML = "";
            dvDistance.innerHTML += "Distance: " + distance + "<br />";
            dvDistance.innerHTML += "Duration:" + duration;

        } else {
            alert("Unable to find the distance via road.");
        }
    });
    
    
}
//把不是本mark的颜色置为蓝色
function changeColorBlue(staffMarkers,staffmarker){
    for(var i =0;i<staffMarkers.length;i++){
        if(staffMarkers[i].marker!=staffmarker){
            staffMarkers[i].markerlabel.changeColor('blue');
        }
    }
}
//清除掉规划的路径
function clearRoute(){
     directionsDisplay.setMap(null);
}