在很多社區管理系統中，地圖展示功能是一個重要的模塊，它能直觀地呈現小區的地理位置分布。本文將詳細梳理從前端觸發請求到地圖上展示小區數據的完整流程，幫助大家理解前后端協同工作的具體細節。

一、前端觸發：頁面加載與地圖初始化

地圖功能的入口在前端的index.vue組件中，整個流程從組件的生命周期和地圖初始化方法開始。

1. 組件結構：頁面使用百度地圖組件baidu-map作為容器，設置了中心坐標（center）和縮放級別（zoom），并綁定了ready事件到initMap方法
   

   <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap">

2. 初始化方法：當百度地圖加載完成后，initMap方法會被調用，這個方法是整個流程的起點

   methods: {initMap({ BMap, map }) {// 設置地圖中心坐標this.center.lng = 116.4146this.center.lat = 40.11316// 啟用地圖交互功能（滾輪縮放、鍵盤控制、雙擊縮放）map.enableScrollWheelZoom()map.enableKeyboard()map.enableDoubleClickZoom()// 核心：調用API獲取小區地圖數據getCommunityMap().then(res => {this.mapData = res.data})}
   }

3. 數據請求：在initMap方法中，通過getCommunityMap()函數發起請求，該函數來自于 API 封裝文件

二、前端請求封裝：API 接口調用

前端通過封裝的 API 函數與后端進行通信，getCommunityMap函數定義在@/api/sys/community文件中（雖然未直接展示，但根據調用方式可推斷），其內部實現大致如下：

// 偽代碼：api/sys/community.js
import request from '@/utils/request'export function getCommunityMap() {return request({url: '/sys/community/getCommunityMap', // 請求后端的URL地址method: 'get' // 請求方法為GET})
}

這個封裝的作用是：

• 統一管理 API 地址，便于維護
• 處理請求頭、認證信息等通用配置
• 簡化組件中的請求代碼

三、后端接口：數據查詢與返回

后端在CommunityController.java中提供了對應的接口來處理地圖數據請求：

1. 接口定義：使用@GetMapping注解定義了/sys/community/getCommunityMap接口

   @GetMapping("/getCommunityMap")
   public Result Map(){// 獲取小區信息列表List<CommunityEntity> list = communityService.list();return Result.ok().put("data", list);
   }

2. 數據查詢：通過調用communityService.list()方法從數據庫查詢所有小區信息，這是 MyBatis-Plus 提供的通用查詢方法，內部會執行SELECT * FROM community類似的 SQL 語句

3. 結果封裝：使用自定義的Result工具類封裝返回數據，將查詢到的小區列表放入data字段中，返回格式大致為：

{"code": 200,"msg": "success","data": [{"communityId": 1,"communityName": "小區A","lng": 116.3755,"lat": 39.80896,// 其他字段...},// 更多小區...]
}

四、前端數據展示：地圖標注渲染

當后端返回數據后，前端通過 Promise 的then方法處理響應結果：

1. 數據接收：將后端返回的res.data賦值給組件的mapData屬性
   

   getCommunityMap().then(res => {this.mapData = res.data
   })

2. 地圖標注：通過v-for指令遍歷mapData，為每個小區創建一個地圖標注（bm-marker)

? ??

<bm-markerv-for="(item, index) in mapData":key="index":position="{lng: item.lng, lat: item.lat}":clicking="false"animation="BMAP_ANIMATION_BOUNCE"
><!-- 顯示小區名稱標簽 --><bm-label :content="item.communityName" :label-style="{color: 'red', fontSize : '9px'}" :offset="{width: -25, height: 20}" />
</bm-marker>

1. 標注屬性說明：

   • position：通過小區的經緯度（lng和lat）確定標注位置
   • animation：設置標注的動畫效果（此處為彈跳效果）
   • bm-label：為標注添加文字標簽，顯示小區名稱

五、完整流程總結

1. 頁面加載時，百度地圖組件初始化完成并觸發initMap方法
2. initMap方法中調用getCommunityMap發起 API 請求
3. 請求通過封裝的 API 函數發送到后端的/sys/community/getCommunityMap接口
4. 后端接口查詢所有小區數據并封裝成統一格式返回
5. 前端接收數據并賦值給mapData
6. 通過v-for遍歷mapData，在地圖上渲染每個小區的標注和名稱

這個流程清晰地展示了前后端如何協同工作來實現地圖展示功能，從前端的用戶交互到后端的數據處理，再到最終的可視化呈現，每個環節都緊密相連，共同構成了完整的功能鏈路。