no message

src/components/car/Map.vue

+<style scoped>
+
+    .card {width: 100vm;
+    height: 320px;
+    border: 1px solid #F0EFEF;
+    border-radius: 8px;}
+    </style>
+    <template>
+        <div class="card" :id="`baidu-map_${center.Id}`"></div>
+    </template>
+    <script>
+    export default {
+        props:["AddressObj"],
+        data() {
+            return {
+                center:{
+                    Lng: 116.294625,
+                    Lat: 39.961627
+                }
+            }
+        },
+      watch: {
+        AddressObj:{
+            handler(newValue,onldValue) {
+                this.center = newValue
+            },
+            deep:true,
+            immediate:true
+        }
+      },
+     mounted() {
+        this.createMap();
+        this.addMarker();
+        this.addLabel()
+      },
+      methods: {
+        createMap() {
+          if (!BMapGL) {
+            return;
+          }
+          let map = new BMapGL.Map(`baidu-map_${this.center.Id}`); // 创建地图实例
+          let point = new BMapGL.Point(this.center.Lng, this.center.Lat); // 创建点坐标
+          map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
+          this.map = map;
+        },
+        addMarker() {
+          let icon = require(`../../assets/img/info-time.png`);
+          var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
+            // 指定定位位置。
+            // 当标注显示在地图上时，其所指向的地理位置距离图标左上
+            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
+            // 图标中央下端的尖角位置。
+            anchor: new BMapGL.Size(10, 25),
+            // 设置图片偏移。
+            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
+            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
+            // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
+          });
+          let point = new BMapGL.Point(this.center.Lng, this.center.Lat); // 创建点坐标
+          // 创建标注对象并添加到地图
+          var marker = new BMapGL.Marker(point, { icon: myIcon });
+          this.map.addOverlay(marker);
+        },
+        addLabel() {
+          var point = new BMapGL.Point(this.center.Lng, this.center.Lat);
+          var content = this.center.Address;
+          var label = new BMapGL.Label(content, {
+            // 创建文本标注
+            position: point, // 设置标注的地理位置
+            offset: new BMapGL.Size(10, -80), // 设置标注的偏移量
+          });
+          this.map.addOverlay(label); // 将标注添加到地图中
+          label.addEventListener("click", function () {
+            alert("您点击了标注");
+          });
+          label.setStyle({
+            // 设置label的样式
+            color: "#000",
+            fontSize: "30px",
+            border: "2px solid #1E90FF",
+          });
+        },
+      },
+    }
+    </script>
+    
\ No newline at end of file

src/pages/detailsCar.vue

@@ -440,23 +440,52 @@
           }"
         ></div>
         <div
-          id="boardingAddress"
+          id="assemblypoint"
           class="text-h5 text-weight-bold text-left q-mt-xl"
-          ref="boardingAddress"
+          ref="assemblypoint"
           :class="{
             'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
           }"
         >
-          上車地址
+          集合地點
         </div>
         <div
-          class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
+          class="q-mt-lg trip-text rounded-borders q-mb-xl"
           style="border: 1px dashed var(--q-color-warning)"
-          :class="{
+          v-for="(x,index) in dataList.PlaceList">
+          <div class="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)">
+            <div class="text-weight-bold text-h6">地点名称：{{x.Name}}</div>
+            <div class="text-grey-9">地址：{{x.Address}}</div>
+          </div>
+          <div class="q-pa-md" :class="{
             'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
+          }">
+            <componentsMap :AddressObj="x"/>
+          </div>
+        </div>
+        <div
+          id="experiencelocation"
+          class="text-h5 text-weight-bold text-left q-mt-xl"
+          ref="experiencelocation"
+          :class="{
+            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
           }"
         >
-          4541545654
+          體驗地點
+        </div>
+        <div
+          class="q-mt-lg trip-text rounded-borders q-mb-xl"
+          style="border: 1px dashed var(--q-color-warning)"
+          v-for="(x,index) in dataList.AirportList">
+          <div class="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)">
+            <div class="text-weight-bold text-h6">地点名称：{{x.Name}}</div>
+            <div class="text-grey-9">地址：{{x.Address}}</div>
+          </div>
+          <div class="q-pa-md" :class="{
+            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
+          }">
+            <componentsMap :AddressObj="x"/>
+          </div>
         </div>
         <div
           id="warning"
@@ -564,6 +593,7 @@ import smaple from "src/components/trip/smaple.vue";
 import Trip from "src/components/trip/trip.vue";
 import block from "src/components/trip/block/index";
 import { date } from "quasar";
+import componentsMap from "../components/car/Map.vue";
 import * as dayjs from "dayjs";
 export default {
   props: [],
@@ -647,16 +677,16 @@ export default {
           display: "購買須知",
         },
         {
-          id: "#boardingAddress",
+          id: "#assemblypoint",
           top: 0,
           isActive: false,
-          display: "上車地址",
+          display: "集合地點",
         },
         {
-          id: "#dropoffaddress",
+          id: "#experiencelocation",
           top: 0,
           isActive: false,
-          display: "下車地址",
+          display: "體驗地點",
         },
         {
           id: "#tips",
@@ -684,6 +714,7 @@ export default {
     smaple,
     Trip,
     block,
+    componentsMap
   },
   watch: {
     days: {