| | |
| | | ajax.set("money",$("#orderMoney").val()); |
| | | ajax.start(); |
| | | } |
| | | var map = new AMap.Map("container", { |
| | | resizeEnable: true, |
| | | zoom: 14 |
| | | |
| | | |
| | | var map; |
| | | |
| | | function initMap() { |
| | | map = new google.maps.Map(document.getElementById("map"), { |
| | | zoom: 14, |
| | | center: { lat: 0, lng: -180 }, |
| | | mapTypeId: "terrain", |
| | | }); |
| | | } |
| | | |
| | | |
| | | $(function() { |
| | | window.initMap = initMap(); |
| | | getTrajectory(); |
| | | }); |
| | | |
| | |
| | | var data = res.data; |
| | | if(data.length > 0){ |
| | | orderTrack(data); |
| | | }/*else{ |
| | | }else{ |
| | | Feng.error("当前订单没有轨迹"); |
| | | }*/ |
| | | } |
| | | }else{ |
| | | Feng.error(res.msg); |
| | | } |
| | |
| | | }); |
| | | } |
| | | |
| | | var marker, lineArr = []; |
| | | |
| | | function orderTrack(data) { |
| | | //重新设置地图中心点 |
| | | map.setCenter({ lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon) }) |
| | | const image = { |
| | | url: "/car.png", |
| | | size: new google.maps.Size(50, 50), |
| | | origin: new google.maps.Point(0, 0), |
| | | anchor: new google.maps.Point(30, 40), |
| | | }; |
| | | new google.maps.Marker({ |
| | | map, |
| | | icon: image, |
| | | position: { lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon) }, |
| | | title: "origin", |
| | | }); |
| | | new google.maps.Marker({ |
| | | map, |
| | | position: { lat: parseFloat(data[data.length - 1].lat), lng: parseFloat(data[data.length - 1].lon) }, |
| | | title: "destination", |
| | | }); |
| | | |
| | | |
| | | const flightPlanCoordinates = []; |
| | | for(var i in data){ |
| | | var waypoints = []; |
| | | var lon = parseFloat(data[i].lon); |
| | | var lat = parseFloat(data[i].lat); |
| | | waypoints.push(lon); |
| | | waypoints.push(lat); |
| | | lineArr.push(waypoints); |
| | | flightPlanCoordinates.push({ |
| | | lat: lat, |
| | | lng: lon |
| | | }) |
| | | } |
| | | |
| | | marker = new AMap.Marker({ |
| | | map: map, |
| | | position: lineArr[0], |
| | | icon: "https://webapi.amap.com/images/car.png", |
| | | offset: new AMap.Pixel(-26, -13), |
| | | autoRotation: true, |
| | | angle:-90, |
| | | const flightPath = new google.maps.Polyline({ |
| | | path: flightPlanCoordinates, |
| | | geodesic: true, |
| | | strokeColor: "#FF0000", |
| | | strokeOpacity: 1.0, |
| | | strokeWeight: 5, |
| | | }); |
| | | |
| | | // 绘制轨迹 |
| | | var polyline = new AMap.Polyline({ |
| | | map: map, |
| | | path: lineArr, |
| | | showDir:true, |
| | | strokeColor: "#28F", //线颜色 |
| | | // strokeOpacity: 1, //线透明度 |
| | | strokeWeight: 6, //线宽 |
| | | // strokeStyle: "solid" //线样式 |
| | | }); |
| | | |
| | | var passedPolyline = new AMap.Polyline({ |
| | | map: map, |
| | | // path: lineArr, |
| | | strokeColor: "#AF5", //线颜色 |
| | | // strokeOpacity: 1, //线透明度 |
| | | strokeWeight: 6, //线宽 |
| | | // strokeStyle: "solid" //线样式 |
| | | }); |
| | | |
| | | |
| | | marker.on('moving', function (e) { |
| | | passedPolyline.setPath(e.passedPath); |
| | | }); |
| | | |
| | | map.setFitView(); |
| | | } |
| | | |
| | | |
| | | function startAnimation () { |
| | | marker.moveAlong(lineArr, 200); |
| | | } |
| | | |
| | | function pauseAnimation () { |
| | | marker.pauseMove(); |
| | | } |
| | | |
| | | function resumeAnimation () { |
| | | marker.resumeMove(); |
| | | } |
| | | |
| | | function stopAnimation () { |
| | | marker.stopMove(); |
| | | flightPath.setMap(map); |
| | | } |