Springboot-vue 地图展现

在很多社区管理系统中，地图展示功能是一个重要的模块，它能直观地呈现小区的地理位置分布。本文将详细梳理从前端触发请求到地图上展示小区数据的完整流程，帮助大家理解前后端协同工作的具体细节。

一、前端触发：页面加载与地图初始化

地图功能的入口在前端的index.vue组件中，整个流程从组件的生命周期和地图初始化方法开始。

组件结构 ：页面使用百度地图组件baidu-map作为容器，设置了中心坐标（center）和缩放级别（zoom），并绑定了ready事件到initMap方法
html 复制代码
```
<baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap">
```

初始化方法 ：当百度地图加载完成后，initMap方法会被调用，这个方法是整个流程的起点

javascript 复制代码

methods: {
  initMap({ BMap, map }) {
    // 设置地图中心坐标
    this.center.lng = 116.4146
    this.center.lat = 40.11316
    // 启用地图交互功能（滚轮缩放、键盘控制、双击缩放）
    map.enableScrollWheelZoom()
    map.enableKeyboard()
    map.enableDoubleClickZoom()
    // 核心：调用API获取小区地图数据
    getCommunityMap().then(res => {
      this.mapData = res.data
    })
  }
}

数据请求 ：在initMap方法中，通过getCommunityMap()函数发起请求，该函数来自于 API 封装文件

二、前端请求封装：API 接口调用

前端通过封装的 API 函数与后端进行通信，getCommunityMap函数定义在@/api/sys/community文件中（虽然未直接展示，但根据调用方式可推断），其内部实现大致如下：

java 复制代码

// 伪代码：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中提供了对应的接口来处理地图数据请求：

接口定义 ：使用@GetMapping注解定义了/sys/community/getCommunityMap接口

java 复制代码

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

数据查询 ：通过调用communityService.list()方法从数据库查询所有小区信息，这是 MyBatis-Plus 提供的通用查询方法，内部会执行SELECT * FROM community类似的 SQL 语句
结果封装 ：使用自定义的Result工具类封装返回数据，将查询到的小区列表放入data字段中，返回格式大致为：

python 复制代码

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

四、前端数据展示：地图标注渲染

当后端返回数据后，前端通过 Promise 的then方法处理响应结果：

数据接收 ：将后端返回的res.data赋值给组件的mapData属性
javascript 复制代码
```
getCommunityMap().then(res => {
  this.mapData = res.data
})
```
地图标注 ：通过v-for指令遍历mapData，为每个小区创建一个地图标注（bm-marker)

html 复制代码

<bm-marker
  v-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>

标注属性说明：
- position：通过小区的经纬度（lng和lat）确定标注位置
- animation：设置标注的动画效果（此处为弹跳效果）
- bm-label：为标注添加文字标签，显示小区名称

五、完整流程总结

页面加载时，百度地图组件初始化完成并触发initMap方法
initMap方法中调用getCommunityMap发起 API 请求
请求通过封装的 API 函数发送到后端的/sys/community/getCommunityMap接口
后端接口查询所有小区数据并封装成统一格式返回
前端接收数据并赋值给mapData
通过v-for遍历mapData，在地图上渲染每个小区的标注和名称

这个流程清晰地展示了前后端如何协同工作来实现地图展示功能，从前端的用户交互到后端的数据处理，再到最终的可视化呈现，每个环节都紧密相连，共同构成了完整的功能链路。