当前位置：首页 > news >正文

Springboot-vue 地图展现

news 2025/8/12 8:28:53

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

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

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

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

初始化方法：当百度地图加载完成后，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})}
}

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

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

@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字段中，返回格式大致为：

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

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

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

数据接收：将后端返回的res.data赋值给组件的mapData属性
```
getCommunityMap().then(res => {this.mapData = res.data
})
```
地图标注：通过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>