| | |
| | | var uid = $("#3dnzNxplgTiHaddR",top.window.document).val(); |
| | | var markers = []; |
| | | var companyId = ''; |
| | | var mark_last;//记录上一次点击的mark |
| | | |
| | | var Home = { |
| | | id: "VersionTable", //表格id |
| | |
| | | }); |
| | | getData(); |
| | | getCompanyByUid(); |
| | | // setInterval(function () { |
| | | // Home.webSocketClient(null); |
| | | // }, 60000 * 5); |
| | | // setInterval(function () { |
| | | // Home.getAllOrder(); |
| | | // }, 60000 * 5); |
| | | setInterval(function () { |
| | | Home.webSocketClient(null); |
| | | }, 60000 * 5); |
| | | setInterval(function () { |
| | | Home.getAllOrder(); |
| | | }, 60000 * 5); |
| | | }); |
| | | |
| | | |
| | | |
| | | var map = new AMap.Map('container',{ |
| | | resizeEnable: true, |
| | | zoom:10 |
| | | }); |
| | | let map; |
| | | let markers = []; |
| | | |
| | | let map2; |
| | | |
| | | let markers2 = []; |
| | | |
| | | function initMap() { |
| | | // The location of Uluru |
| | | const uluru = { lat: 5.668430499999999, lng: -0.060339 }; |
| | | // The map, centered at Uluru |
| | | map = new google.maps.Map(document.getElementById("map"), { |
| | | zoom: 8, |
| | | center: uluru, |
| | | }); |
| | | |
| | | // The map, centered at Uluru |
| | | map2 = new google.maps.Map(document.getElementById("map1"), { |
| | | zoom: 7, |
| | | center: uluru, |
| | | }); |
| | | } |
| | | |
| | | |
| | | var map_ = new AMap.Map('container_',{ |
| | | resizeEnable: true, |
| | | mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9', |
| | | zoom:10 |
| | | }); |
| | | |
| | | var mouseTool = new AMap.MouseTool(map); |
| | | //监听draw事件可获取画好的覆盖物 |
| | | var overlays = []; |
| | | var name = null; |
| | | var coordinate = '';//存储坐标 |
| | | mouseTool.on('draw',function(e){ |
| | | overlays.push(e.obj); |
| | | console.log(e.obj.getPath()); |
| | | |
| | | switch (name) { |
| | | case 'polyline':{//折线图 |
| | | var polyline = e.obj.getPath(); |
| | | getCoordinate(polyline); |
| | | break; |
| | | } |
| | | case 'polygon':{//多边形 |
| | | var polygon = e.obj.getPath(); |
| | | getCoordinate(polygon); |
| | | break; |
| | | } |
| | | case 'rectangle':{//矩形 |
| | | var rectangle = e.obj.getPath(); |
| | | getCoordinate(rectangle); |
| | | break; |
| | | } |
| | | case 'circle':{//圆行 |
| | | var center = e.obj.getCenter(); |
| | | var radius = e.obj.getRadius(); |
| | | if(radius > 5000){ |
| | | Feng.error("创建电子围栏失败,圆半径不能大于5000米"); |
| | | return; |
| | | } |
| | | coordinate = center.lng + ',' + center.lat + ';' + radius; |
| | | break; |
| | | } |
| | | } |
| | | console.log(coordinate); |
| | | }) |
| | | |
| | | window.initMap = initMap; |
| | | |
| | | function getCompanyByUid() { |
| | | $.ajax({ |
| | |
| | | } |
| | | |
| | | |
| | | |
| | | function clearMarkers() { |
| | | for (let i = 0; i < markers.length; i++) { |
| | | markers[i].setMap(null); |
| | | } |
| | | markers = []; |
| | | } |
| | | |
| | | function clearMarkers1() { |
| | | for (let i = 0; i < markers2.length; i++) { |
| | | markers2[i].setMap(null); |
| | | } |
| | | markers2 = []; |
| | | } |
| | | |
| | | |
| | | |
| | | Home.webSocketClient = function (companyId) { |
| | | $.ajax({ |
| | | url: Feng.ctxPath + '/home/getDriverPosition', |
| | | type: 'POST', |
| | | data: { |
| | | companyId: companyId, |
| | | //暂定修改此处,不改方法 |
| | | state:$("#driverState").val() |
| | | companyId: companyId |
| | | }, |
| | | success: function (res) { |
| | | map.remove(markers); |
| | | markers = []; |
| | | var data = res.driver; |
| | | clearMarkers(); |
| | | var data1 = res.driver1; |
| | | var data2 = res.driver2; |
| | | var order = res.order; |
| | | var d = ''; |
| | | for(var i in data){ |
| | | var driver = data[i].driver; |
| | | var driverId = driver.id |
| | | var state='<span style="font-size:12px;padding:3px 3px;float: right" class="label label-error">离</span>'; |
| | | if("2"==driver.state){ |
| | | state='<span style="font-size:12px;padding:3px 3px;float: right" class="label label-warning">听</span>'; |
| | | }else if("3"==driver.state){ |
| | | state='<span style="font-size:12px;padding:3px 3px;float: right" class="label label-primary">载</span>'; |
| | | } |
| | | d += '<li style="font-size: 12px;" class="list-group-item" ondblclick="Home.dblclickDriver('+i+')" id="' + driverId + '">' + driver.name + '-' + driver.phone +state+ '</li>'; |
| | | if('' != data[i].lon){ |
| | | // 创建 AMap.Icon 实例: |
| | | var icon = new AMap.Icon({ |
| | | size: new AMap.Size(40, 50), // 图标尺寸 |
| | | image: '/static/car.png', // Icon的图像 |
| | | // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量,适于雪碧图等 |
| | | imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片 |
| | | }); |
| | | for(var i in data1){ |
| | | var driver = data1[i].driver; |
| | | var driverId = driver.id; |
| | | d += '<li class="list-group-item" id="' + driverId + '">' + driver.name + '-' + driver.phone + '</li>'; |
| | | if('' != data1[i].lon){ |
| | | const image = { |
| | | url: "/static/icon_car@2x.png", |
| | | size: new google.maps.Size(50, 50), |
| | | origin: new google.maps.Point(16, 15), |
| | | anchor: new google.maps.Point(0, 0), |
| | | }; |
| | | const shape = { |
| | | coords: [1, 1, 1, 20, 18, 20, 18, 1], |
| | | type: "poly", |
| | | }; |
| | | |
| | | var marker = new AMap.Marker({ |
| | | position: new AMap.LngLat(data[i].lon, data[i].lat), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] |
| | | offset: new AMap.Pixel(-10, -10), |
| | | icon: icon, // 添加 Icon 实例 |
| | | }); |
| | | marker.setExtData([driverId]) |
| | | marker.on('click', function(){ |
| | | Home.openNetCarInfo(this); |
| | | }); |
| | | //console.log(marker); |
| | | markers.push(marker) |
| | | markers.push( |
| | | new google.maps.Marker({ |
| | | position: { lat: parseFloat(data1[i].lat), lng: parseFloat(data1[i].lon) }, |
| | | map, |
| | | icon: image, |
| | | shape: shape, |
| | | title: driver.name + '-' + driver.phone, |
| | | zIndex: driverId, |
| | | }) |
| | | ) |
| | | } |
| | | } |
| | | |
| | | for(var i in data2){ |
| | | var driver = data2[i].driver; |
| | | var driverId = driver.id; |
| | | d += '<li class="list-group-item" id="' + driverId + '">' + driver.name + '-' + driver.phone + '</li>'; |
| | | if('' != data2[i].lon){ |
| | | const image = { |
| | | url: "/static/car.png", |
| | | size: new google.maps.Size(50, 50), |
| | | origin: new google.maps.Point(0, 0), |
| | | anchor: new google.maps.Point(0, 50), |
| | | }; |
| | | const shape = { |
| | | coords: [1, 1, 1, 20, 18, 20, 18, 1], |
| | | type: "poly", |
| | | }; |
| | | |
| | | markers.push( |
| | | new google.maps.Marker({ |
| | | position: { lat: parseFloat(data2[i].lat), lng: parseFloat(data2[i].lon) }, |
| | | map, |
| | | icon: image, |
| | | shape: shape, |
| | | title: driver.name + '-' + driver.phone, |
| | | zIndex: driverId, |
| | | }) |
| | | ) |
| | | } |
| | | } |
| | | $('#netcardriver').html(d); |
| | | map.add(markers); |
| | | |
| | | //订单数据 |
| | | var privateCar=order.privateCar; |
| | | var zhuanche = order.zhuanche; |
| | | var kuacheng = order.kuacheng; |
| | | var chuzu = order.chuzu; |
| | | var kuahceng = order.kuahceng; |
| | | var o = ''; |
| | | $('#order').html(o); |
| | | console.log(order); |
| | | |
| | | var zc = '<div class="list-group"><a href="#" class="list-group-item active">专车未接订单</a>' |
| | | for(var i in privateCar){ |
| | | zc += '<a href="#" class="list-group-item"><p class="list-group-item-text">起点:' + privateCar[i].start + '</p><p class="list-group-item-text">终点:' + privateCar[i].end + '</p>' + |
| | | '<p class="list-group-item-text">下单时间:' + privateCar[i].travelTime + '</p><p class="list-group-item-text">车型:' + privateCar[i].carModel + '</p>' + |
| | | '<p class="list-group-item-text">人数:' + privateCar[i].num + '</p></a>'; |
| | | for(var i in zhuanche){ |
| | | zc += '<a href="#" class="list-group-item"><p class="list-group-item-text">起点:' + zhuanche[i].startAddress + '</p><p class="list-group-item-text">终点:' + zhuanche[i].endAddress + '</p>' + |
| | | '<p class="list-group-item-text">下单时间:' + new Date(zhuanche[i].travelTime) + '</p>' + |
| | | '</a>'; |
| | | } |
| | | zc += '</div>'; |
| | | o += zc; |
| | | |
| | | var kc = '<div class="list-group"><a href="#" class="list-group-item active">跨城出行未接订单</a>' |
| | | var kc = '<div class="list-group"><a href="#" class="list-group-item active">市内小件物流未接订单</a>' |
| | | for(var i in kuacheng){ |
| | | kc += '<a href="#" class="list-group-item"><p class="list-group-item-text">起点:' + kuacheng[i].start + '</p><p class="list-group-item-text">终点:' + kuacheng[i].end + '</p>' + |
| | | '<p class="list-group-item-text">下单时间:' + kuacheng[i].travelTime + '</p><p class="list-group-item-text">车型:' + kuacheng[i].carModel + '</p>' + |
| | | '<p class="list-group-item-text">人数:' + kuacheng[i].num + '</p></a>'; |
| | | kc += '<a href="#" class="list-group-item"><p class="list-group-item-text">起点:' + kuacheng[i].startAddress + '</p><p class="list-group-item-text">终点:' + kuacheng[i].endAddress + '</p>' + |
| | | '<p class="list-group-item-text">下单时间:' + new Date(kuacheng[i].travelTime) + '</p><p class="list-group-item-text">物品类型:' + kuacheng[i].cargoName + '</p>' + |
| | | '<p class="list-group-item-text">数量:' + kuacheng[i].cargoNumber + '</p></a>'; |
| | | } |
| | | |
| | | kc += '</div>'; |
| | | o += kc; |
| | | |
| | | var cz = '<div class="list-group"><a href="#" class="list-group-item active">出租车未接订单</a>' |
| | | for(var i in chuzu){ |
| | | cz += '<a href="#" class="list-group-item"><p class="list-group-item-text">起点:' + chuzu[i].start + '</p><p class="list-group-item-text">终点:' + chuzu[i].end + '</p>' + |
| | | '<p class="list-group-item-text">下单时间:' + chuzu[i].travelTime + '</p><p class="list-group-item-text">车型:' + chuzu[i].carModel + '</p>' + |
| | | '<p class="list-group-item-text">人数:' + chuzu[i].num + '</p></a>'; |
| | | } |
| | | cz += '</div>'; |
| | | o += cz; |
| | | |
| | | var cx = '<div class="list-group"><a href="#" class="list-group-item active">城乡出行未接订单</a>' |
| | | for(var i in kuahceng){ |
| | | cx += '<a href="#" class="list-group-item"><p class="list-group-item-text">起点:' + kuahceng[i].start + '</p><p class="list-group-item-text">终点:' + kuahceng[i].end + '</p>' + |
| | | '<p class="list-group-item-text">下单时间:' + kuahceng[i].travelTime + '</p><p class="list-group-item-text">车型:' + kuahceng[i].carModel + '</p>' + |
| | | '<p class="list-group-item-text">人数:' + kuahceng[i].num + '</p></a>'; |
| | | } |
| | | cx += '</div>'; |
| | | o += cx; |
| | | |
| | | $('#order').html(o); |
| | | } |
| | |
| | | $.ajax({ |
| | | url: Feng.ctxPath + '/home/getAllOrder', |
| | | type: 'POST', |
| | | data: { |
| | | companyId: companyId, |
| | | uid: uid |
| | | }, |
| | | success: function (res) { |
| | | var style = [{ |
| | | url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', |
| | | anchor: new AMap.Pixel(6, 6), |
| | | size: new AMap.Size(11, 11) |
| | | }, { |
| | | url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png', |
| | | anchor: new AMap.Pixel(4, 4), |
| | | size: new AMap.Size(7, 7) |
| | | }, { |
| | | url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png', |
| | | anchor: new AMap.Pixel(3, 3), |
| | | size: new AMap.Size(5, 5) |
| | | }]; |
| | | |
| | | var mass = new AMap.MassMarks(citys, { |
| | | opacity: 0.8, |
| | | zIndex: 111, |
| | | cursor: 'pointer', |
| | | style: style |
| | | }); |
| | | |
| | | var marker = new AMap.Marker({content: ' ', map: map_}); |
| | | |
| | | mass.on('mouseover', function (e) { |
| | | |
| | | marker.setPosition(e.data.lnglat); |
| | | marker.setLabel({content: e.data.name}) |
| | | }); |
| | | |
| | | var data = []; |
| | | clearMarkers1() |
| | | for(var i in res){ |
| | | var obj = { |
| | | lnglat: [res[i].lon, res[i].lat] |
| | | } |
| | | data.push(obj); |
| | | markers2.push( |
| | | new google.maps.Marker({ |
| | | position: { lat: parseFloat(res[i].lat), lng: parseFloat(res[i].lon) }, |
| | | map: map2, |
| | | }) |
| | | ) |
| | | } |
| | | mass.setData(data); |
| | | mass.setMap(map_); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | //双击司机li |
| | | /*Home.dblclickDriver=function (lon,lat) { |
| | | var markerPosition = [lon,lat]; |
| | | map.panTo(markerPosition); |
| | | |
| | | }*/ |
| | | Home.dblclickDriver=function (i) { |
| | | var marker=markers[i]; |
| | | var position=[marker.w.position.lng,marker.w.position.lat]; |
| | | map.panTo(position); |
| | | var iconOld = new AMap.Icon({ |
| | | size: new AMap.Size(40, 50), // 图标尺寸 |
| | | image: '/static/car.png', // Icon的图像 |
| | | imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片 |
| | | }); |
| | | var iconNew = new AMap.Icon({ |
| | | size: new AMap.Size(40, 50), // 图标尺寸 |
| | | image: '/static/car_blue.jpg', // Icon的图像 |
| | | imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片 |
| | | }); |
| | | //标记当前这个的样式 |
| | | marker.setIcon(iconNew); |
| | | //还原上一个的样式 |
| | | if(typeof (mark_last) != "undefined"){ |
| | | if(mark_last!=marker){ |
| | | mark_last.setIcon(iconOld); |
| | | } |
| | | |
| | | } |
| | | //记录为最后一个标记的 |
| | | mark_last=marker; |
| | | } |
| | | |
| | | |
| | | function getData1() { |