1.完成 物流信息 页面的地图在运输中的状态绘制逻辑

src/components/AMapView.vue

 <template>
-  <div id="aMapContainer">
-
-  </div>
+  <div id="aMapContainer"></div>
 </template>
 
 <script>
 export default {
   name: 'AMapView',
+  data () {
+    return {
+      icons: {
+        startIcon: require('@/assets/img/start.png'),
+        currentIcon: require('@/assets/img/sph_car.png'),
+        endIcon: require('@/assets/img/end.png')
+      }
+    }
+  },
   props: {
+    transport: {
+      type: Boolean,
+      default: false
+    },
     pointList: {
       type: Array,
       default: () => {
@@ -38,10 +49,15 @@ export default {
   methods: {
     initAMap() {
       let map = new AMap.Map('aMapContainer', {
-        resizeEnable: true
+        resizeEnable: true,
+        zoom: 11,
+        zooms: [5, 15]
       })
-      // this.drawDriveLine(map)
-      this.drawPointLine(map)
+      if (this.transport) {
+        this.drawExelState(map)
+      } else {
+        this.drawPointLine(map)
+      }
     },
     /* 根据点数组画线 */
     drawPointLine(map) {
@@ -81,7 +97,6 @@ export default {
         AMap.convertFrom(aMapTemp, 'gps', function (status, result) {
           if (result.info === 'ok') {
             let aMapLngLat = result.locations
-            console.log(aMapLngLat)
             // 转换成高德数据后，替换源数据
             aMapLngLat.forEach((lngLat, i) => {
               itemArr[i].x = lngLat.lng
@@ -90,23 +105,28 @@ export default {
             // 绘制起点
             if (tdIndex === 0) {
               let startMarker = new AMap.Marker({
-                position: aMapLngLat[0]
+                position: aMapLngLat[0],
+                offset: new AMap.Pixel(-15, -38),
+                icon: _this.icons.startIcon
               })
               startMarker.setLabel({
-                offset: new AMap.Pixel(4, 0),  //设置文本标注偏移量
-                content: `<div class='marker'>${_this.drivePoint.startPoint.address}</div>`, //设置文本标注内容
-                direction: 'right' //设置文本标注方位
+                offset: new AMap.Pixel(4, 0), // 设置文本标注偏移量
+                content: `<div class='marker'>${_this.drivePoint.startPoint.address}</div>`, // 设置文本标注内容
+                direction: 'right' // 设置文本标注方位
               })
               map.add(startMarker)
             }
+            // 绘制终点
             if (tdIndex === tdGroup.length - 1) {
               let endMarker = new AMap.Marker({
-                position: aMapLngLat[aMapLngLat.length - 1]
+                position: aMapLngLat[aMapLngLat.length - 1],
+                offset: new AMap.Pixel(-15, -38),
+                icon: _this.icons.endIcon
               })
               endMarker.setLabel({
-                offset: new AMap.Pixel(4, 0),  //设置文本标注偏移量
-                content: `<div class='marker'>${_this.drivePoint.endPoint.address}</div>`, //设置文本标注内容
-                direction: 'right' //设置文本标注方位
+                offset: new AMap.Pixel(4, 0), // 设置文本标注偏移量
+                content: `<div class='marker'>${_this.drivePoint.endPoint.address}</div>`, // 设置文本标注内容
+                direction: 'right' // 设置文本标注方位
               })
               map.add(endMarker)
             }
@@ -140,25 +160,59 @@ export default {
         })
       })
     },
-    /* 根据起点和终点绘制线路 */
-    drawDriveLine(map) {
-      // 构造路线导航类
-      let driving = new AMap.Driving({
-        map: map,
-        showTraffic: false
-      })
-      let startPoint = new AMap.LngLat(this.drivePoint.startPoint.longitude, this.drivePoint.startPoint.latitude)
-      let endPoint = new AMap.LngLat(this.drivePoint.endPoint.longitude, this.drivePoint.endPoint.latitude)
-      // let startPoint = new AMap.LngLat(parseFloat(this.pointList[this.pointList.length - 1].longitude), parseFloat(this.pointList[this.pointList.length - 1].latitude))
-      // let endPoint = new AMap.LngLat(parseFloat(this.pointList[0].longitude), parseFloat(this.pointList[0].latitude))
-      console.log('start=> ', startPoint, ' end=> ', endPoint)
-      // 根据起终点经纬度规划驾车导航路线
-      driving.search(startPoint, endPoint, function(status, result) {
-        // result 即是对应的驾车导航信息，相关数据结构文档请参考
-        if (status === 'complete') {
-          console.log('绘制驾车路线完成')
-        } else {
-          console.log('获取驾车数据失败：' + result)
+    /* 绘制起点和终点，并绘制车的位置 */
+    drawExelState(map) {
+      let _this = this
+      // 获取Gis点数据的最后一位
+      let currentItem = _this.pointList.slice(-1)[0]
+
+      let startPoint = new AMap.LngLat(_this.drivePoint.startPoint.longitude, _this.drivePoint.startPoint.latitude)
+      let currentPoint = new AMap.LngLat(currentItem.longitude, currentItem.latitude)
+      let endPoint = new AMap.LngLat(_this.drivePoint.endPoint.longitude, _this.drivePoint.endPoint.latitude)
+      // 塞入临时数据
+      let aMapTemp = [startPoint, currentPoint, endPoint]
+      // 转换成高德点
+      AMap.convertFrom(aMapTemp, 'gps', function (status, result) {
+        if (result.info === 'ok') {
+          let aMapLngLat = result.locations
+          console.log(aMapLngLat)
+          // 开始绘制起点
+          let startMarker = new AMap.Marker({
+            position: aMapLngLat[0],
+            icon: _this.icons.startIcon,
+            offset: new AMap.Pixel(-15, -38)
+          })
+          startMarker.setLabel({
+            offset: new AMap.Pixel(4, 0), // 设置文本标注偏移量
+            content: `<div class='marker'>${_this.drivePoint.startPoint.address}</div>`, // 设置文本标注内容
+            direction: 'right' // 设置文本标注方位
+          })
+          map.add(startMarker)
+
+          // 开始绘制车辆位置
+          let currentMarker = new AMap.Marker({
+            position: aMapLngLat[1],
+            angle: parseInt(currentItem.direction),
+            offset: new AMap.Pixel(-15, -20),
+            icon: new AMap.Icon({
+              image: _this.icons.currentIcon,
+              size: new AMap.Size(52, 52), // 图标大小
+              imageSize: new AMap.Size(30, 40)
+            })
+          })
+          map.add(currentMarker)
+          // 开始绘制终点
+          let endMarker = new AMap.Marker({
+            position: aMapLngLat[2],
+            icon: _this.icons.endIcon,
+            offset: new AMap.Pixel(-15, -38)
+          })
+          endMarker.setLabel({
+            offset: new AMap.Pixel(4, 0), // 设置文本标注偏移量
+            content: `<div class='marker'>${_this.drivePoint.endPoint.address}</div>`, // 设置文本标注内容
+            direction: 'right' // 设置文本标注方位
+          })
+          map.add(endMarker)
         }
       })
     }

src/views/myOrder/detail/logisticsDetail.vue

@@ -3,8 +3,7 @@
     <van-empty description="暂无数据"
                v-if="!shippingInfo&&!shippingInfo.shippingNo&&
                (!stepList|| stepList.length<0)&&(!mapPointList||mapPointList.length < 0)"/>
-<!--    <map-view :point-list="mapPointList" v-if="mapPointList&&mapPointList.length > 0"/>-->
-    <a-map-view :point-list="mapPointList" :drive-point="driveLine" v-if="mapPointList&&mapPointList.length > 0"/>
+    <a-map-view :transport="(this.shippingInfo.signTime === '')" :point-list="mapPointList" :drive-point="driveLine" v-if="mapPointList&&mapPointList.length > 0"/>
     <div class="logistics-header" v-if="shippingInfo&&shippingInfo.shippingNo">
       <div class="header-title">
         <van-icon class="logistic-logo" :name="icons.logo"/>
@@ -106,6 +105,7 @@ export default {
     },
     /* 获取运单信息 */
     getShippingData() {
+      console.log(this.orderInfo)
       let data = {
         'orderId': '',
         'orderNo': this.orderInfo.orderNo, // '879202103190016',