From 79776f5e9c9052c233a6f2e3392e900437556979 Mon Sep 17 00:00:00 2001
From: renna <576157508@qq.com>
Date: Mon, 16 Jun 2025 15:30:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E8=83=8C=E6=99=AF=E4=B8=BA?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                      |   2 +-
 src/assets/img/position.png          | Bin 0 -> 1151 bytes
 src/assets/js/custom_map_config.json | 876 +++++++++++++++++++++++++++
 src/views/Home.vue                   | 227 +++++--
 4 files changed, 1067 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/img/position.png
 create mode 100644 src/assets/js/custom_map_config.json

diff --git a/.env.production b/.env.production
index bdf60ac..64af417 100644
--- a/.env.production
+++ b/.env.production
@@ -6,7 +6,7 @@ VITE_APP_ENV = 'production'
 # 地址替换时间20250427
 
 # base_url
-VITE_APP_BASE_API='http://10.0.202:9123'
+VITE_APP_BASE_API='http://14.103.162.172:9123'
 
 # 可安可
 VITE_APP_CONCOAI_API='https://rest.concoai.com'
diff --git a/src/assets/img/position.png b/src/assets/img/position.png
new file mode 100644
index 0000000000000000000000000000000000000000..7178e45ec6703cf9c50fa0ff8f41466a92ad7606
GIT binary patch
literal 1151
zcmV-_1c3XAP)<h;3K|Lk000e1NJLTq001BW001Ni1^@s6=<7J*00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1Qba`K~#7Fy;r?*
z(^wS#Buk1DvJ<mxv0KIL47;1%Ey5d^fd(2vLz~bullTc@o<NwPC$uz#iiVk(jtX2r
z+!2S0h8fRboY=DO<(wlcvL#EFJ%MjVqu;CZo!@(ofvj*FMVQ8I7^(zqtkaXi@L)8D
zM-2+EQC_QM{40#9U$~7DOzhHC2?l*`T6E;-FvI0q0jduS2L82>F)P^q`{}gb8!3WG
zV>}VTIU8^meZj^Q&I1qddO*MH6H$XZDF0udjevW&LFRr!S{AUd4CE}#3`Lgcwuw-m
z?;c=#t&)wvqsA6AX>K{d!iDJ?PeZRm$7v!7bL@^aXW?w_{Bo-B;&Kk#|1HTm70wbV
zvcy-rs5UCm*P#U8=LfLtBJ#gr8jkK>65*|$!sTaQ=&aKh1eQ>^Hku`&1#*T<J}-*T
zGoav@XXk>G!A)!l%Z3ED`>rrfz-7Pd4KaO2pWk`al5^#48_l-Lv<8mE6j?gIJx;*H
zrlgv+fUF3F);@cg*GTQKS%%&TtYC`oIoE9mKLs{f8Abu-;wIl(etAWr_LZv_uuDf0
zYPT*<d|v<J;o8eqJUH3KTvz&DiSDW<2`@=`O+cFPG^}5;lT(xluw1YUG>TGUe*jjJ
zvO^RmH$48hN>QQL{f#9Ar`5)4+$C(*oj2`?InUX!f832dFa6=fEfL7`Iv4$`Nb2#T
z=hs(aKimJ*L-nvj888@o&c&#Dc!C$7;sn@*n^*FYr$Yicb7i9QlL`w5<kpo%(kN;%
zlPcqH*$R?CjZtaJ&Xo~S;US3`HZ47Lp_y-5Wd1ts*~P4DlWPCL&4Rct6BN5pw{ZW@
zV~g0-sfpMaeb2$PVz(!*Wph8jQHVS<u>R}hRIa{{$BZ;B+K?v2k{-^~e&aA~JXkvp
zwj`8(w~-b5(ZFQ$_dTuydwgs9TO+aQo#3aS-}BF`ID&jo{i>M7Z=c5S@Iwdlp!s!x
z*ON9XR#cPr<+Uc?hM`++9MO(g#A3V|Sxt!iG#pRbqQj=-azG%A9EE#Snht~^_XX2_
zHY?cles5R_gfl|bI2M#H3xV^F2c8+a-#GI3sWE*p`fA*^<$oUv!}BD;v32s52bMbY
z$-U_7xO07mJ_+vY^#F5$(~Y%e;Y#m8b*UM>+KPUbG8xHm;?h-7+9-!M6eHud?VS#z
zovIxS8qxl#CViS-z}+Kiold!d+>(x&gEOsfWOJW>^XEfOHBH0FNWjfb;EV|MjRp-C
z1`%OvEKKN<SnF<w1=pZ+Wt9J_XZiJPbC-L#BW~dac65FS$FE8>%Fma8kdSfx;LH+U
z*AKQigfnI@aY4Oc!90QorF9PB^AQjdQZH)5fNM&y&58L4Fw~jQy=jr2hVKagk#L|c
Rk|+QG002ovPDHLkV1lqxChY(K

literal 0
HcmV?d00001

diff --git a/src/assets/js/custom_map_config.json b/src/assets/js/custom_map_config.json
new file mode 100644
index 0000000..5af9f18
--- /dev/null
+++ b/src/assets/js/custom_map_config.json
@@ -0,0 +1,876 @@
+[{
+    "featureType": "background",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "land",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#003044ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "building",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#002435ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "building",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#00121cff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#133f58ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "country",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "city",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "continent",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "village",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "town",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "district",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "poilabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "poilabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#002738ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "poilabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "transportationlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "transportationlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "airportlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "airportlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "green",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#0c364cff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "district",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "city",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "country",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "continent",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "town",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "village",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "town",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "city",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "railway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "subway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "highwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "provincialwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "provincialwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "subwaylabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "subwaylabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "weight": 1.5,
+        "visibility": "on"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#002738ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#002738ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "subway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#078381ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "shopping",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "manmade",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "manmade",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "highwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "water",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#002e42ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "labels.text",
+    "stylers": {
+        "fontsize": 28
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#066f6dff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "local",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#004c45ff",
+        "visibility": "on",
+        "weight": 1.5
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "6"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "7"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "8"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "6"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "7"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "8"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "6"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "7"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "8"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "provincialway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8,10",
+        "level": "8"
+    }
+}, {
+    "featureType": "provincialway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8,10",
+        "level": "9"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8,10",
+        "level": "8"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8,10",
+        "level": "9"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8,10",
+        "level": "8"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8,10",
+        "level": "9"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "6"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "7"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "8"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "6"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "7"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "8"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "6"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "7"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "8"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "arterial",
+    "stylers": {
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9,9",
+        "level": "9"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#07A7A2ff",
+        "visibility": "on"
+    }
+}, {
+    "featureType": "scenicspots",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#0c364cff",
+        "visibility": "on"
+    }
+}]
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 786b03e..efa02a6 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,11 +1,13 @@
 <template>  
     <div class="main">
+    <!-- 地图容器 -->
+    <div id="map-container" class="map-container"></div>
     <!-- 渐变边框 -->
     <div class="border-gradient top"></div>
     <div class="border-gradient bottom"></div>
     <div class="border-gradient left"></div>
     <div class="border-gradient right"></div>
-    <div class="center_tip">
+    <!-- <div class="center_tip">
       <div class="center-tip-content">
         <template v-for="robot in outdoorRobots" :key="robot.id">
           <div class="center-tip-robot" @click="handleRobotClick(robot.id)">
@@ -17,8 +19,8 @@
             <span class="alarm-btn">{{ robotAlertMap[robot.id] > 0 ? '有告警' : '无告警' }}</span>
           </div>
         </template>
-      </div>
-    </div>
+      </div> 
+    </div> -->
     <!-- 顶部组件 -->
     <TopHeader />
     
@@ -121,6 +123,8 @@ import Icon3 from '../assets/img/icon3.png'
 import Icon4 from '../assets/img/icon4.png'
 import jkA from '../assets/img/jkA.png'
 import jkRobot from '../assets/img/jkRobot.png'
+import customMapStyle from '../assets/js/custom_map_config.json'
+import position from '../assets/img/position.png'
 
 
 // 统计数据
@@ -323,7 +327,148 @@ function handleRobotClick(id) {
 onMounted(() => {
   fetchRobotStatistics();
   fetchMonitorStreams();
+  loadMapScript();
 });
+
+// 地图实例
+const map = ref(null);
+
+const loadMapScript = () => {
+  // 此处在所需页面引入资源就是,不用再public/index.html中引入
+  const script = document.createElement("script");
+  script.type = "text/javascript";
+  script.className = "loadmap";
+  // 此处需要注意：申请ak时,一定要应用类别一定要选浏览器端,不能选服务端,不然地图会报ak无效
+  script.src =
+    "https://api.map.baidu.com/getscript?v=3.0&ak=qyF9CAmGoZ2jZrKXqW7q3OaWV7wkgqjn";
+  script.onload = () => {
+    init();
+  };
+  let loadmap = document.getElementsByClassName("loadmap");
+  if (loadmap.length > 0) {
+    // 每次append script之前判断一下,避免重复添加script资源标签
+    for (let i = 0; i < loadmap.length; i++) {
+      document.body.removeChild(loadmap[i]);
+    }
+  }
+  document.body.appendChild(script);
+};
+
+const init = () => {
+  let BMap = window.BMap; // 注意要带window,不然会报错
+  map.value = new BMap.Map("map-container");
+  const centerPoint = new BMap.Point(121.544962, 30.844821); // 上海康达新能源材料有限公司坐标
+  map.value.centerAndZoom(centerPoint, 22); // 放大到22级，更近距离显示
+  map.value.enableScrollWheelZoom(true);
+  
+  // 使用自定义地图样式
+  map.value.setMapStyleV2({styleJson: customMapStyle});
+  
+  map.value.disableDoubleClickZoom();
+  
+  // 设置地图缩放限制
+  map.value.setMinZoom(18); // 最小缩放级别为18
+  map.value.setMaxZoom(25); // 最大缩放级别为25
+  
+  // 自定义图标
+  const myIcon = new BMap.Icon(
+    position, // 图标路径
+    new BMap.Size(32, 40), // 调整图标大小，确保底部完全显示
+    {
+      imageOffset: new BMap.Size(0, 0), // 图片偏移
+      anchor: new BMap.Size(16, 40) // 调整锚点位置，确保图标底部对准坐标点
+    }
+  );
+  
+  // 添加标记点并使用自定义图标
+  const marker = new BMap.Marker(centerPoint, { icon: myIcon }); // 创建标记
+  map.value.addOverlay(marker); // 将标记添加到地图中
+
+  // 为全局window对象添加点击处理函数，供标签内的点击事件使用
+  window.handleRobotClick = (id) => {
+    // 获取对应机器人的状态
+    const robot = outdoorRobots.value.find(r => r.id === id);
+    // 如果机器人状态为离线，则不跳转
+    if (robot && robot.status === '离线') {
+      console.log('机器人离线，不跳转');
+      return;
+    }
+    // 否则正常跳转
+    handleRobotClick(id);
+  };
+  
+  // 创建自定义标签内容
+  const createLabelContent = () => {
+    let content = '<div class="center-tip-content">';
+    
+    // 遍历室外机器人数据
+    outdoorRobots.value.forEach(robot => {
+      // 为离线状态的机器人添加特殊样式
+      const offlineClass = robot.status === '离线' ? 'robot-offline' : '';
+      
+      content += `
+        <div class="center-tip-robot ${offlineClass}" onclick="window.handleRobotClick('${robot.id}')">
+          <span class="robot-id">${robot.id}</span>
+          <span class="divider">|</span>
+          <span class="robot-power">电量：${robot.battery}%</span>
+          <span class="divider">|</span>
+          <span class="robot-status">${robot.status}</span>
+          <span class="alarm-btn">${robotAlertMap.value[robot.id] > 0 ? '有告警' : '无告警'}</span>
+        </div>
+      `;
+    });
+    
+    content += '</div>';
+    return content;
+  };
+  
+  // 创建标签
+  let opts = {
+    position: centerPoint,
+    offset: new BMap.Size(-130, -80) // 上移60px
+  };
+  
+  let label = new BMap.Label(createLabelContent(), opts);
+  
+  // 设置标签样式
+  label.setStyle({
+    color: "#fff",
+    border: "none",
+    backgroundColor: "rgba(0,0,0,0.4)",
+    zIndex: "2",
+    borderRadius: "6px",
+    fontSize: "12px",
+  });
+  
+  // 添加标签到地图
+  map.value.addOverlay(label);
+  
+  // 更新标签位置的函数
+  const updateLabelPosition = () => {
+    const pixel = map.value.pointToOverlayPixel(centerPoint);
+    label.setPosition(centerPoint);
+  };
+  
+  // 更新标签内容的函数
+  const updateLabelContent = () => {
+    label.setContent(createLabelContent());
+  };
+  
+  // 监听室外机器人数据变化，更新标签内容
+  watch(outdoorRobots, () => {
+    updateLabelContent();
+  });
+  
+  // 监听告警数据变化，更新标签内容
+  watch(robotAlertMap, () => {
+    updateLabelContent();
+  }, { deep: true });
+  
+  // 添加地图事件监听
+  map.value.addEventListener('zoomend', updateLabelPosition);
+  map.value.addEventListener('moveend', updateLabelPosition);
+  map.value.addEventListener('resize', updateLabelPosition);
+};
 </script>
 
 <style scoped>
@@ -331,9 +476,17 @@ onMounted(() => {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    background: url("../assets/img/bg.png") no-repeat;
-    background-size: 100% 100%;
     position: relative;
+    background-color: #001520;
+}
+
+.map-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
 }
 
 .left_content,
@@ -441,7 +594,7 @@ onMounted(() => {
   left: 25%;
   right: 25%;
   bottom: 1.667vw; /* 32px at 1920px width */
-  z-index: 2;
+  z-index: 200;
 }
 
 .monitor-title {
@@ -542,58 +695,58 @@ onMounted(() => {
 
 .center_tip {
   position: absolute;
-  
   top: 42%;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 2000;
+  z-index: 200;
   display: flex;
   justify-content: center;
   width: auto;
+  pointer-events: none; /* 允许点击穿透到地图 */
 }
-.center-tip-content {
-  display: flex;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-radius: 6px;
-  padding: 0.5vw 1vw; /* 5px 24px */
-  font-size: 14px;
-  color: #B9E8FF;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-  gap: 0.3vw; /* 12px */
-}
-.center-tip-content .robot-id {
- 
-  color: #B9E8FF;
-}
-.center-tip-content .divider {
-  color: #B9E8FF;
-  margin: 0 0.417vw;
-}
-.center-tip-content .robot-power {
-  color: #B9E8FF;
-}
-.center-tip-content .robot-status {
-  color: #B9E8FF;
-}
-.center-tip-content .alarm-btn {
+
+</style>
+<style>
+.alarm-btn {
   background: #FF9800;
   color: #151515;
   border: none;
   border-radius: 12px;
-  padding: 0.1vw 0.3vw; /* 2.5px 19px */
+  padding: 0.1vw 0.3vw;
   font-size: 12px;
   margin-left: 0.625vw;
   cursor: pointer;
   transition: background 0.2s;
 }
-
 .center-tip-robot {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   border-radius: 6px;
-  padding: 0 0.3vw;
+  padding: 0.3vw;
 }
 
+/* 离线状态机器人样式 */
+.robot-offline {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.robot-id {
+  color: #B9E8FF;
+  font-weight: bold;
+}
+
+.divider {
+  color: #B9E8FF;
+  margin: 0 0.417vw;
+}
+
+.robot-power {
+  color: #B9E8FF;
+}
+
+.robot-status {
+  color: #B9E8FF;
+}
 </style>