Springboot-vue 地图展现

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

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

地图功能的入口在前端的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.4146
       this.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-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>

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，在地图上渲染每个小区的标注和名称

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