src/types/amap.d.ts

@@ -26,6 +26,7 @@ declare namespace AMap {
     pitch?: number
     rotation?: number
     zoom?: number
+    zooms?: [number, number]
     center?: [number, number]
     mapStyle?: string
     features?: string[]

src/views/map/MapView.vue

@@ -405,6 +405,7 @@ onMounted(async () => {
       pitch: 0,
       rotation: 0,
       zoom: 5,
+      zooms: [4, 18],
       center: [104.07, 30.67],
       mapStyle: 'amap://styles/normal',
       features: ['bg', 'road', 'building', 'point'],
@@ -415,7 +416,7 @@ onMounted(async () => {
 
     mapInst.addControl(new AMapLib.Scale())
     mapInst.addControl(new AMapLib.ToolBar({ position: 'LT' } as Record<string, unknown>))
-    mapInst.addControl(new AMapLib.ControlBar({ position: { right: '10px', top: '80px' } } as Record<string, unknown>))
+    mapInst.addControl(new AMapLib.ControlBar({ position: { right: '50px', bottom: '224px' } } as Record<string, unknown>))
     mapInst.on('click', () => { previewCloud.value = null; hideHoverCard() })
     mapInst.on('zoomstart', hideHeader)
     mapInst.on('movestart', hideHeader)
@@ -442,7 +443,7 @@ onUnmounted(() => {
   <div class="relative h-[100dvh] min-h-screen">
     <div ref="mapEl" class="w-full h-full"></div>
 
-    <div class="absolute bottom-6 right-4 flex flex-col items-end gap-2 z-20">
+    <div class="absolute bottom-6 right-7 z-20 flex w-10 flex-col items-center gap-2">
       <button
         type="button"
         class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50"
@@ -642,6 +643,11 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+:deep(.amap-controlbar) {
+  transform: translateX(50%) scale(1);
+  transform-origin: bottom right;
+}
+
 .map-archive-button.map-archive-button {
   border-radius: 9999px !important;
 }