谷歌相关功能

  1 var map = null;
  2 var MAP_CENTER_LAT = 51.518345;
  3 var MAP_CENTER_LNG = 8.4208345;
  4 var StationMarkerArr = new Array();
  5 var OrderMarkerArr = new Array();
  6 
  7 var service;
  8 var directionsDisplayArray =new Array() ;
  9 var directionsDisplay ;
 10 var table1 ;
 11 var staffTable = null;
 12 
 13 var staionMarker=new Object();
 14 var staffMarkers=new Array();
 15 var staffMarkerStaffs = new Array();
 16 
 17 
 18 var stationPostion;
 19 
 20 $(function() {
 21     // 初始化地图
 22     try{
 23         var defaultZoom = 10;
 24         var mapProp = {
 25             center : new google.maps.LatLng(MAP_CENTER_LAT, MAP_CENTER_LNG),
 26             zoom : defaultZoom,
 27             mapTypeId : google.maps.MapTypeId.ROADMAP
 28         };
 29         map = new google.maps.Map(document.getElementById("wfm_gmap"), mapProp);
 30         
 31         directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true ,suppressInfoWindows:true,suppressMarkers:true});
 32         
 33         google.maps.event.addListener(map, 'zoom_changed', function () {
 34             if (map.getZoom() > defaultZoom){
 35                 map.setZoom(defaultZoom);
 36             }
 37         });
 38     }catch(err){
 39         alert("google map initialize failed: <br>"+err);
 40     }
 41     
 42     table1 =  $('#example').DataTable({
 43         "bPaginate": true, //翻页功能
 44         "bLengthChange": true, //改变每页显示数据数量
 45         "bSort": false, //排序功能
 46         "bInfo": true,//页脚信息
 47         "autoWidth": false,
 48         "sScrollY":"450px",
 49         "sScrollX": "100%",
 50         "aoColumns": [
 51             {"mData": "ROW_SEQ","sTitle":"SEQ"},
 52               {"mData": "WORK_ITEM","sTitle":"workitem"},
 53               {"mData": "ORD_NO","sTitle":"ord_no"},
 54               {"mData": "TASK_TITLE","sTitle":"task_title","defaultContent":""},
 55               {"mData": "WORKORDER_NO","sTitle":"WORKORDER_NO","defaultContent":""},
 56               {"mData": "STATION_ID","sTitle":"STATION_ID","defaultContent":""},
 57               {"mData": "NE_ID","sTitle":"NE_ID","defaultContent":""}
 58         ],
 59         "bProcessing": true,
 60         "paging": true,
 61         "searching": true,
 62           "ordering": true,
 63           "bScrollInfinite": true,
 64           "bScrollCollapse": true,
 65           "renderer": "bootstrap",
 66           "deferRender": true,
 67           "showRowNumber": true,
 68           "pagingType": "simple",
 69           "aLengthMenu": [50,100,150],
 70           "sAjaxSource": ctx+"/gisDispatch/searchWorkOrder.do",
 71           "fnServerData": function ( sSource, aoData, fnCallback ) {
 72           $.ajax( {
 73               "dataType": 'json',
 74               "type": "POST",
 75               "url": sSource,
 76               "data": aoData,
 77               "success": function(data){
 78                   var aaData = data;
 79                   initMapData(data);
 80                   fnCallback(aaData);
 81               }
 82           });
 83        }
 84     });
 85     
 86     staffTable = $('#example2').DataTable({
 87         "bSort": false, //排序功能
 88         "bInfo": false,//页脚信息
 89         "paging": false,
 90         "autoWidth": false,
 91         "sScrollY":"450px",
 92         "sScrollX": "100%",
 93         "aoColumns": [
 94             {"mData": "ROW_SEQ","sTitle":"SEQ"},
 95               {"mData": "STAFF_NAME","sTitle":"STAFFNAME"},
 96               {"mData": "DISTANCE","sTitle":"DISTANCES"},
 97               {"mData": "ORD_NUM","sTitle":"ORDER_NUMBER"},
 98               {"mData": "STAFF_ID","sTitle":"STAFF_ID","visible":false}
 99               
100         ],
101         "searching": false,
102           "ordering": true,
103           "bScrollCollapse": true,
104           "renderer": "bootstrap",
105           "deferRender": true,
106           "sAjaxSource": ctx+"/gisDispatch/searchTeamStaff.do",
107           "fnServerData": function ( sSource, aoData, fnCallback ) {
108               var paramData = table1.row().data();
109               if(!paramData){
110                   return;
111               }
112               aoData.push({name:"NE_ID",value:paramData.NE_ID});
113               aoData.push({name:"LATITUDE",value:paramData.LATITUDE});
114               aoData.push({name:"LONGITUDE",value:paramData.LONGITUDE});
115               $.ajax( {
116                   "dataType": 'json',
117                   "type": "POST",
118                   "url": sSource,
119                   "data": aoData,
120                   "success": function(data){
121                       
122                       if(!!staionMarker.marker){
123                           staionMarker.marker.setMap(null);
124                       }
125                       if(!!staionMarker.markerlabel){
126                           staionMarker.markerlabel.clear();
127                       }
128                       staionMarker = new Object();
129                       
130                       func_cleanMarkers(staffMarkers);
131                       staffMarkers = new Array();
132                       
133                       var markerPos = new google.maps.LatLng(StationMarkerArr[paramData.STATION_ID].lati, StationMarkerArr[paramData.STATION_ID].lngi);
134                       stationPostion = markerPos;
135                       var marker = new google.maps.Marker({
136                           position : markerPos,
137                           animation : google.maps.Animation.DROP,
138                           draggable : false,
139                           cursor : 'hand',
140                           title:paramData.WORKORDER_NO,
141                           icon:ctx+'/google/cabin.png'
142                       });
143                       
144                       staionMarker.marker=marker;
145                       staionMarker.markerlabel = new MarkerLable(marker.position, marker.title, map);
146                       staionMarker.marker.setMap(map);
147                       staionMarker.markerlabel.show();
148                       var bounds = new google.maps.LatLngBounds();
149                       bounds.extend(markerPos);
150                       map.panToBounds(bounds);
151                       map.setCenter(markerPos);
152                       
153                       for(var i in data.aaData){
154                           var staffmarkerPos = new google.maps.LatLng(data.aaData[i].LATITUDE,data.aaData[i].LONGITUDE);
155                           var staffmarkId = data.aaData[i].STAFF_ID;
156                           var staffmarker = new google.maps.Marker({
157                               position : staffmarkerPos,
158                               animation : google.maps.Animation.DROP,
159                               draggable : false,
160                               cursor : 'hand',
161                               title:data.aaData[i].STAFF_NAME,
162                               icon:ctx+'/google/normal-staff.png',
163                               
164                           });
165                           var sm = new Object();
166                           sm.marker=staffmarker;
167                           sm.markerlabel = new MarkerLable(staffmarker.position, staffmarker.title, map);
168                           sm.marker.setMap(map);
169                           sm.markerlabel.show();
170                           //重新添加标记就将分派按钮置为不可用
171                           disabledAssginBtn();
172                           (function (staffmarker,markerlable,staffmarkId) {
173                               google.maps.event.addListener(staffmarker, 'click', function() {
174                                   //将分派按钮置为可用
175                                   undisabledAssginBtn();
176                                   //规划路线图
177                                   getRoute(staffmarker.position,marker.position,map);
178                                   //得到详情
179                                   getDetailsRoutes(staffmarker.position,marker.position,map);
180                                   //显示对话框
181                                   $('#siteinfo_modal').modal('show');
182                                   //改变颜色 变红
183                                   markerlable.changeColor('red');
184                                   //把其他颜色改为蓝色
185                                   changeColorBlue(staffMarkers,staffmarker);
186                                   //表格联动
187                                   changeTableSelect(staffmarkId);
188                               });
189                           })(sm.marker,sm.markerlabel,staffmarkId);
190                           
191                           staffMarkerStaffs[data.aaData[i].STAFF_ID]=sm;
192                           staffMarkers.push(sm);
193                           var bounds = new google.maps.LatLngBounds();
194                           bounds.extend(staffmarkerPos);
195                           map.panToBounds(bounds);
196                       }
197                       fnCallback(data);
198                   }
199               });
200        }
201     });
202     
203     $('#example tbody').on('mousedown', 'tr', function (e) {
204         if(3 == e.which){
205           if ( $(this).hasClass('selected') ) {
206           }else {
207             table1.$('tr.selected').removeClass('selected');
208             $(this).addClass('selected');
209           }
210         }else if(1 == e.which){
211           if ( $(this).hasClass('selected') ) {
212           } else {
213             table1.$('tr.selected').removeClass('selected');
214             $(this).addClass('selected');
215           }
216         }
217     });
218     
219     
220     //staffTable的选中改变颜色
221     $('#example2 tbody').on('mousedown', 'tr', function (e) {
222         if(3 == e.which){
223           if ( $(this).hasClass('selected') ) {
224           }else {
225               staffTable.$('tr.selected').removeClass('selected');
226               $(this).addClass('selected');
227           }
228         }else if(1 == e.which){
229           if ( $(this).hasClass('selected') ) {
230           } else {
231               staffTable.$('tr.selected').removeClass('selected');
232               $(this).addClass('selected');
233           }
234         }
235     });
236     
237     //表格和图标联动
238     function changeTableSelect(staffId){
239         var data = $('#example2').DataTable().rows().nodes();
240         var data2 = $('#example2').DataTable().rows().data();
241         $(data).each(function(index,item){
242             if(data2[index].STAFF_ID==staffId){
243                 $(item).addClass('selected');
244             }else{
245                 $(item).removeClass('selected');
246             }
247           });
248     }
249     
250     //工单表点击事件
251     $('#example tbody').on('dblclick', 'tr', function(e){
252         var obj = table1.row($(this)).data();
253         loadStaffTable();
254         //清除原来规划的路径
255         clearRoute();
256     });
257     
258     //staffTable点击事件
259     $('#example2 tbody').on('click', 'tr', function(e){
260         var objstaff = staffTable.row($(this)).data();
261         var staffPostion = new google.maps.LatLng(objstaff.LATITUDE, objstaff.LONGITUDE);
262         var staffId = objstaff.STAFF_ID;
263         getRoute(staffPostion,stationPostion,map);
264         getDetailsRoutes(staffPostion,stationPostion,map);
265         $('#siteinfo_modal').modal('show');
266         staffMarkerStaffs[staffId].markerlabel.changeColor('red');
267         changeColorBlue(staffMarkers,staffMarkerStaffs[staffId].marker);
268     });
269     
270     
271     $("#tbar_btn_stationscan").click(function() {
272         stationScan();
273     });
274     
275     var mapdiv = document.getElementById("wfm_gmap");
276     mapdiv.style.height = (screen.availHeight - 300) + "px";
277 });
278 
279 function initMapData(data){
280     var aaData = data.aaData;
281     StationMarkerArr = new Array();
282     for(var i=0;i<aaData.length;i++){
283         if(!StationMarkerArr[aaData[i].STATION_ID]){
284             StationMarkerArr[aaData[i].STATION_ID] = new Array();
285             StationMarkerArr[aaData[i].STATION_ID].name = aaData[i].STATION_NAME;
286             StationMarkerArr[aaData[i].STATION_ID].id = aaData[i].STATION_ID;
287             StationMarkerArr[aaData[i].STATION_ID].lati = aaData[i].LATITUDE;
288             StationMarkerArr[aaData[i].STATION_ID].lngi = aaData[i].LONGITUDE;
289             StationMarkerArr[aaData[i].STATION_ID].orderArr = new Array(); 
290         }
291         StationMarkerArr[aaData[i].STATION_ID].orderArr[aaData[i].WORKORDER_NO] = aaData[i];
292     }
293 }
294 
295 function showMarkers(){
296     
297 }
298 var stationMarkers=[];
299 // 站点查看
300 function stationScan() {
301     // first clear old markers 
302     func_cleanMarkers();
303     stationMarkers=[];
304     var marker = null;
305     var infoWindow = new google.maps.InfoWindow(); 
306     for ( var i in StationMarkerArr) {
307         var markerPos = new google.maps.LatLng(StationMarkerArr[i].lati, StationMarkerArr[i].lngi);
308         
309         var length = StationMarkerArr[i].orderArr.length;
310         var iconpath = '<%=path%>/google/cabin.png';
311         if(length > 0){
312             if(length <= 10){
313                 iconpath = '<%=path%>/plugins/google-map/img/m1.png';
314             } else if(length > 10 && length <= 50){
315                 iconpath = '<%=path%>/plugins/google-map/img/m2.png';
316             } else if(length > 50 && length <= 100){
317                 iconpath = '<%=path%>/plugins/google-map/img/m3.png';
318             } else if(length > 100 && length <= 200){
319                 iconpath = '<%=path%>/plugins/google-map/img/m4.png';
320             } else {
321                 iconpath = '<%=path%>/plugins/google-map/img/m5.png';
322             }
323         }
324         
325         marker = new google.maps.Marker({
326             position : markerPos,
327             animation : google.maps.Animation.DROP,
328             draggable : false,
329             cursor : 'hand',
330             _id:i,
331             title:StationMarkerArr[i].name,
332             icon:iconpath,
333             ordernum:length
334         });
335         stationMarkers[i] = new Array();
336         stationMarkers[i].marker=marker;
337         stationMarkers[i].markerlable=new MarkerLable(marker.position, marker.title, map);
338         marker.setMap(map);
339         stationMarkers[i].markerlable.show();
340         
341         (function (marker) {  
342             google.maps.event.addListener(marker, "click", function (e) {  
343                 infoWindow.setContent("<div style = '200px;min-height:40px'> has" + marker.ordernum+ " records </div>");
344                 infoWindow.open(map, marker); 
345             });  
346         })(marker);
347     }
348     // 调整视阈
349     setAutoZoom(map,stationMarkers);
350 }
351 
352 
353 function setAutoZoom(gmap,markers){
354     var bounds = new google.maps.LatLngBounds();
355     for ( var i in stationMarkers) {
356         bounds.extend(new google.maps.LatLng(markers[i].marker.getPosition().lat(),markers[i].marker.getPosition().lng()));
357     }
358     gmap.fitBounds(bounds);
359 }
360 
361 // 清理掉站点marker
362 function func_cleanMarkers(markers) {
363     var arrSize = markers.length;
364     for ( var i in markers) {
365         var marker = markers[i].marker;
366         if (marker && marker != null) {
367             if(!!markers[i].markerlabel){
368                 markers[i].markerlabel.clear();
369                 markers[i].markerlabel = null;
370             }
371             marker.setMap(null);
372         }
373     }
374 }
375 
376 
377 
378 function reloadWorkOrder(){
379     table1.ajax.reload();
380     table1.draw();
381 }
382 
383 
384 function loadStaffTable(){
385     staffTable.ajax.reload();
386     staffTable.draw();
387 }
388 
389 //分派按钮变灰
390 function disabledAssginBtn(){
391     $("#tbar_btn_assgin").attr("disabled",true);
392     $("#i_assgin").attr("class","fa fa-flag-o text-gray");
393 }
394 
395 //分派按钮可用
396 function undisabledAssginBtn(){
397     $("#tbar_btn_assgin").attr("disabled",false);
398     $("#i_assgin").attr("class","fa fa-flag-o text-blue");
399 }
400 
401 //得到规划路线
402 function getRoute(source,destination,map){
403     var directionsService = new google.maps.DirectionsService();
404     directionsDisplay.setMap(map);
405     var request = {
406         origin: source,
407         destination: destination,
408         travelMode: google.maps.TravelMode.DRIVING
409     };
410     directionsService.route(request, function (response, status) {
411         if (status == google.maps.DirectionsStatus.OK) {
412             directionsDisplay.setDirections(response);
413         }
414     });
415 }
416 
417 //得到规划路径的详细些信息
418 function getDetailsRoutes(source,destination,map){
419     service = new google.maps.DistanceMatrixService();
420     service.getDistanceMatrix({
421         origins: [source],
422         destinations: [destination],
423         travelMode: google.maps.TravelMode.DRIVING,
424         unitSystem: google.maps.UnitSystem.METRIC,
425         avoidHighways: false,
426         avoidTolls: false
427     }, function (response, status) {
428         if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
429             var distance = response.rows[0].elements[0].distance.text;
430             var duration = response.rows[0].elements[0].duration.text;
431             var dvDistance = document.getElementById("siteinfo_modal_label");
432             dvDistance.innerHTML = "";
433             dvDistance.innerHTML += "Distance: " + distance + "<br />";
434             dvDistance.innerHTML += "Duration:" + duration;
435 
436         } else {
437             alert("Unable to find the distance via road.");
438         }
439     });
440     
441     
442 }
443 //把不是本mark的颜色置为蓝色
444 function changeColorBlue(staffMarkers,staffmarker){
445     for(var i =0;i<staffMarkers.length;i++){
446         if(staffMarkers[i].marker!=staffmarker){
447             staffMarkers[i].markerlabel.changeColor('blue');
448         }
449     }
450 }
451 //清除掉规划的路径
452 function clearRoute(){
453      directionsDisplay.setMap(null);
454 }