工单详情添加司机位置弹框地图展示

package.json

@@ -48,8 +48,10 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {},
-
+    "globals":{
+      "AMap": "true"
+    }
   },
   "browserslist": [
     "> 1%",

public/index.html

@@ -26,7 +26,6 @@
     <script type="text/javascript">
         window._AMapSecurityConfig = {
             serviceHost: 'https://api.sinoassist.com/_AMapService',
-            // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
         }
     </script>
     <script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508"></script>

src/views/index/workOrderDetail.vue

@@ -63,16 +63,19 @@
           <span class="leftTitle fontColor">服务车辆:</span><span class="rightContent">{{ orderDetailInfo.taskVehicleName }}</span>
         </div>
         <div class="item">
-          <span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">{{ orderDetailInfo.driverName }} {{orderDetailInfo.drivePhone ? '/' : ''}} {{orderDetailInfo.drivePhone }}</span>
+          <span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">{{ orderDetailInfo.driverName }} {{orderDetailInfo.drivePhone ? '/' : ''}} {{orderDetailInfo.drivePhone }} <span class="driverPoiBtn" @click="showMap">查看司机位置</span></span>
         </div>
       </div>
     </div>
+    <div class="map" @click="showPopup = false" v-show="showPopup"    id="container"></div>
   </div>
 </template>
-
 <script>
 import {myMixins} from '@/utils/myMixins'
-import {getOrderDetail} from "@/api/order"
+import {getOrderDetail,showVehiclePositionInfo} from "@/api/order"
+import minePosition from '@/assets/minePosition.png';
+import vehiclePosition from '@/assets/vehiclePosition.png';
+import  desitationPosition from '@/assets/desitationPosition.png'
 export default {
   name: "workOrderDetail",
   mixins:[myMixins],
@@ -82,7 +85,10 @@ export default {
       queryType:'',
       orderCode:'',
       taskOrderId:'',
-      orderDetailInfo:{}
+      orderDetailInfo:{},
+      showPopup: false,
+      map: '',
+      driverPoiInfo:{},
     }
   },
   async mounted() {
@@ -94,6 +100,12 @@ export default {
     this.orderCode=urlParams.get('orderCode');
     this.taskOrderId=urlParams.get('taskOrderId') ? urlParams.get('taskOrderId') : '';
     await this.getDetail();
+    await this.getDriverPoi();
+    // this.initMap();
+    this.$nextTick(() => {
+      this.initMap();
+    });
+
   },
   methods:{
     async getDetail(){
@@ -106,6 +118,62 @@ export default {
       // if(result.code === 200){
         this.orderDetailInfo=result.data;
       // }
+    },
+    showMap() {
+      console.log(this.showPopup)
+      this.showPopup = true;
+
+    },
+    initMap() {
+      this.map = new AMap.Map('container',{
+        zoom:14,//级别(缩放比例 3-20 )
+        center: [this.driverPoiInfo.vehiclePositionLongtitude,this.driverPoiInfo.vehiclePositionLatitude],//中心点坐标
+        viewMode:'2D',//使用3D视图
+      })
+      this.map.on('complete', () => {
+        console.log("地图加载完成")
+        this.mapMarkers();
+      });
+    },
+    mapMarkers(){
+      // 车辆位置，a点
+      let marker = new AMap.Marker({
+        position: [this.driverPoiInfo?.vehiclePositionLongtitude,this.driverPoiInfo?.vehiclePositionLatitude],
+        icon: new AMap.Icon({
+          image: minePosition, // 图片的相对路径
+          size: new AMap.Size(22, 32),  // 图标的尺寸
+          imageSize: new AMap.Size(22, 32)  // 图片的实际尺寸
+        }),
+      });
+      this.map.add(marker);
+      // 事发地，b点
+      let marker1 = new AMap.Marker({
+        position: [this.driverPoiInfo?.vehiclePointLongitude,this.driverPoiInfo?.vehiclePointLatitude],
+        icon: new AMap.Icon({
+          image: vehiclePosition, // 图片的相对路径
+          size: new AMap.Size(26, 28),  // 图标的尺寸
+          imageSize: new AMap.Size(26, 28)  // 图片的实际尺寸
+        })
+      });
+      this.map.add(marker1);
+      let marker2 = new AMap.Marker({
+        position: [this.driverPoiInfo?.destinationLongitude,this.driverPoiInfo?.destinationLatitude],
+        icon: new AMap.Icon({
+          image: desitationPosition, // 图片的相对路径
+          size: new AMap.Size(28, 28),  // 图标的尺寸
+          imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
+        })
+      });
+      this.map.add(marker2);
+      this.map.setFitView([marker,marker1,marker2])
+    },
+    async getDriverPoi(){
+      let res=await showVehiclePositionInfo({
+        userOrderId:2704382,//this.userOrderId,
+        taskOrderId:24145//this.taskOrderId
+      })
+      this.driverPoiInfo = res.data
+      console.log("driverPoiInfo",this.driverPoiInfo)
     }
   }
 }
@@ -118,6 +186,34 @@ export default {
   background-color: #F4F5F7;
   overflow-y: auto;
 }
+::v-deep .amap-copyright{
+  display: none !important;
+}
+::v-deep .amap-logo{
+  display: none !important;
+}
+.map{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  @include wh(95%,350px);
+}
+.map:before{
+  content: "";
+  background-color: #FFFFFF;
+  background: url('@/assets/delKey.png') no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  @include wh(25px,25px);
+  display: inline-block;
+  z-index: 1111;
+  pointer-events: auto;
+}
 .common{
   background: #FFFFFF;
   @include radiusSizing(6px);
@@ -160,6 +256,16 @@ export default {
     .rightContent{
       width: calc(100% - 90px);
       @include fontWeightSize(bold,12px);
+      .driverPoiBtn{
+        display: inline-block;
+        padding: 3px 8px;
+        @include bgFontColor(#FFFFFF,#354D93);
+        opacity: .7;
+        border-radius: 3px;
+        text-align: center;
+        margin-left: 6px;
+        cursor: pointer;
+      }
     }
 
     .vehicleRemark{