修复百度地图报错

src/App.vue

@@ -14,4 +14,8 @@ body,
   width: 100%;
   height: 100%;
 }
+.BMap_cpyCtrl,
+  .anchorBL {
+    display: none !important;
+   }
 </style>

src/views/distribution/reservation/atlas1.vue

@@ -1,26 +1,26 @@
 <template>
-    <div class="bmap" id="container" style="float: left"></div>
-    <div
+    <div class="bmap" id="container"></div>
+    <!-- <div
             style="
       border: 1px solid pink;
       margin-left: 5px;
       height: 600px;
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     "
-    >
+    > -->
         <!--            @change="handleCheckedCitiesChange"-->
-        <el-checkbox-group v-model="reservationIds">
+        <!-- <el-checkbox-group v-model="reservationIds">
             <el-col v-for="(item, index) in reservationData">
                 <el-checkbox :label="item.id" :key="item.id"
-                >{{ item.consignee }}&emsp;{{ item.deliveryAddress }}&emsp;{{
-                    item.deliveryPhone
+                >{{ item.customerName }}&emsp;{{ item.customerAddress }}&emsp;{{
+                    item.customerTelephone
                     }}</el-checkbox
                 >
             </el-col>
-        </el-checkbox-group>
-    </div>
+        </el-checkbox-group> -->
+    <!-- </div> -->
 
-    <div style="margin-left: 40%; margin-top: 5%; float: bottom">
+    <div style="display: flex;align-items: center;justify-content: center;">
         <el-button icon="el-icon-circle-close" @click="back">返 回</el-button>
     </div>
 </template>
@@ -41,46 +41,44 @@
     reservationData: [],
     reservationIds: [],
     mapLoc: null,
+    // datalist:[]
   });
-  onMounted(() => {
+  onMounted(()=>{
+    initmap()
+  })
+  watchEffect(()=>{
     details.item = JSON.parse(router.currentRoute.value.query.item);
     selectStockArticleAtlasInfo(details.item.id).then(res => {
       const data = res.data.data;
       console.log('res------------->', data);
+      details.reservationData=data
       setTimeout(() => {
         init(data);
       }, 1500);
     });
-    // setTimeout(()=>{
-    //   details.mapLoc.clearOverlays();
-
-    // },9500)
-  });
-
-  function init(data) {
+  })
+  function initmap(){
     details.mapLoc = new BMapGL.Map('container'); // 创建地图实例
-
     let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
     details.mapLoc.centerAndZoom(point, 12);
     details.mapLoc.enableScrollWheelZoom(true);
+  }
+  function init(data) {
+    
     // maplabel()
-    if (details.mapLoc) {
-      details.mapLoc.clearOverlays(); //清除地图的label
+    if (details?.mapLoc) {
+      details?.mapLoc.clearOverlays(); //清除地图的label
     }
-    let a = data;
-    a.forEach((item,index)=>{
-      console.log('item------------->', item);
+    data.map((item,index)=>{
       maplabel(item.customerAddress, item.customerName+"--"+item.customerAddress+"--"+item.customerTelephone, index);
 
-      // maplabel('中国四川省成都市简阳市石桥镇简阳市石桥镇红星美凯龙雄州商场-1-26-154', '周娅', 0);
     })
-    // maplabel('四川成都龙泉驿区','展示的内容', 0);
   }
   function maplabel(address,contents, index) {
     let myGeo = new BMapGL.Geocoder();
     myGeo.getPoint(address, function (point) {
       if (point) {
-        console.log(point, '---------------');
+        // console.log(point, '---------------');
         if (index == 0) {
           details.mapLoc.centerAndZoom(point, 12);
         }
@@ -99,10 +97,10 @@
           borderRadius: '20px',
           padding: '5px 10px',
         });
-        console.log(label, '---------------');
+        // console.log(label, '---------------');
       } else {
         // alert('您选择的地址没有解析到结果！');
-        console.log(point);
+        // console.log(point);
         console.log('您选择的地址没有解析到结果！');
       }
     });
@@ -115,8 +113,9 @@
 
 <style scoped>
     .bmap {
-        width: 800px;
-        height: 600px;
-        border: 1px solid pink;
+        width: 100%;
+        height: 700px;
+        margin-bottom: 60px;
+        /* border: 1px solid pink; */
     }
 </style>