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 0000000..7178e45
Binary files /dev/null and b/src/assets/img/position.png differ
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>