style:首页

src/components/Map/index.vue

@@ -3,17 +3,65 @@
 </template>
 
 <script setup>
-  import { onMounted } from 'vue'
+  import axios from 'axios'
+  const fetchData = async () => {
+    try {
+      const res = await axios.get(
+        'https://jiaotong.baidu.com/openapi/v2/event/alarmlist?nodeId=7162&roadType=1,2,3,4,5&eventSource=1,2,3&ak=hPEEq9eAtL3t1SXL8hqNYQkGmWT1oOWh&returnType=1'
+      )
+      console.log(res, '数据')
+    } catch (error) {
+      console.error(error)
+    }
+  }
   onMounted(() => {
+    // fetchData()
     var map = new BMapGL.Map('container')
-    map.centerAndZoom(new BMapGL.Point(106.506299, 29.613929), 18)
+    map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 15)
     map.enableScrollWheelZoom(true)
+    map.setMapType(BMAP_SATELLITE_MAP)
+
+    // 绘制线
+    var polyline = new BMapGL.Polyline(
+      [
+        new BMapGL.Point(109.65053, 31.034752),
+        new BMapGL.Point(109.647332, 31.033104),
+        new BMapGL.Point(109.646883, 31.031797),
+        new BMapGL.Point(109.640254, 31.021136)
+      ],
+      {
+        strokeStyle: 'solid',
+        strokeColor: 'red ',
+        // strokeTexture: {
+        //   url: 'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/Icon_road_blue_arrow.png',
+        //   width: 16,
+        //   height: 64
+        // },
+        strokeWeight: 4,
+        strokeOpacity: 0.8
+      }
+    )
+    map.addOverlay(polyline)
   })
 </script>
 
 <style scoped lang="scss">
+  :deep(.BMap_cpyCtrl) {
+    display: none;
+  }
+  :deep(.anchorBL) {
+    display: none;
+  }
+  // ::v-deep {
+  //   .BMap_cpyCtrl {
+  //     display: none;
+  //   }
+  //   .anchorBL {
+  //     display: none;
+  //   }
+  // }
   .map {
-    width: vw(3040);
-    height: vh(1080);
+    width: 100%;
+    height: vh(700);
   }
 </style>