gx

2024-07-14 09:48:31 +08:00 · 2024-07-14 09:48:31 +08:00 · 9f092d797a
parent 51886476f0
commit 9f092d797a
2 changed files with 23 additions and 38 deletions
--- a/index.html
+++ b/index.html
@ -5,7 +5,10 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>公共服务一体化驾驶舱</title>
-    <script src="https://webapi.amap.com/maps?v=2.0&key=92c48d6015b3c1a023a22506c2581e6d"></script>
+    <script
+    type="text/javascript"
+    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"
+  ></script>
  </head>
  <body>
    <div id="app"></div>
--- a/src/view/echart_analyze/map.vue
+++ b/src/view/echart_analyze/map.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="amap-container" class="amap-container" />
+  <div id="map"></div>
 </template>
 <script setup>
 import {
@ -10,44 +10,26 @@ import {
  onBeforeUnmount,
  computed,
 } from "vue";
-const longAndLat = [119.178783,29.034583];
-const init = () => {
-  var map = new AMap.Map("amap-container", {
-    // 地图中心位置
-    center: longAndLat,
-    resizeEnable: true,
-    // 主题色
-    mapStyle: "amap://styles/blue",
-    // 地图层级
-    zoom: 12.5,
-    labelDefault:{
-      textStyle:{
-        color:'#fffff',
-      }
-    }
-  });
-  // 实时路况图层
-  var trafficLayer = new AMap.TileLayer.Traffic({
-    zIndex: 10,
-    zooms: [7, 20],
-  });
-  trafficLayer.setMap(map);
-};
+var map = null
+const initMap = () => {
+  map = new BMapGL.Map('map', { minZoom: 11, maxZoom: 20 })
+  map.enableScrollWheelZoom(true)
+  map.setMapStyleV2({
+    styleId: 'd0acde891abd157741b71e12670ee2e6'
+  })
+  goMapCenter([119.178783,29.034583], 17)
+}

+//地图中点
+const goMapCenter = (point, zoom) => {
+  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom)
+}
 onMounted(() => {
-  init();
-});
+  initMap()
+})
 </script>
 <style lang="scss" scoped>
-::v-deep .amap-logo {
-            display: none!important; ;
+::v-deep  .anchorBL{
+    display:none;
  }
-::v-deep .amap-copyright {
-          bottom:-100px;
-           display: none!important;;
-    }  
-::v-deep .amap-container {
-  /* 调整区域的字体颜色 */
-  color: #ff0000; /* 红色 */
-}
 </style>