SpringBoot-Vue整合百度地图

在现代Web应用中，地图功能是一个常见的需求，尤其是在涉及地理位置信息的场景中，如物流、房产、旅游等行业。本文将详细介绍如何在Spring Boot项目中整合百度地图，实现地图的显示、定位、标注等功能，并结合Vue.js实现前后端分离的开发模式。

一、Spring Boot整合百度地图的步骤

1. 申请百度地图的AK值

• 进入百度地图开放平台（https://lbsyun.baidu.com/），注册账号并创建应用。
• 在应用管理中获取AK（访问密钥），这是使用百度地图API的必要凭证。

2. 创建实体类

地图中位置的展现需要经度和纬度，我们需要在实体类中加入这两个必备属性，其他属性按需添加。

@Data
public class Community {
    private Long id;
    private String communityName;
    private String lng; // 经度
    private String lat; // 纬度
}

数据库示例：

3. 创建Controller层

获取所有小区的详细信息。

@RestController
@RequestMapping("/community")
public class CommunityController {
    @Autowired
    private CommunityService communityService;

    @GetMapping("/getCommunityMap")
    public Result getCommunityMap(){
        List<Community> list = this.communityService.list();
        if(list == null) return Result.error("没有小区数据");
        return Result.ok().put("data", list);
    }
}

4. 前端集成百度地图

4.1 在Vue项目中安装百度地图Vue组件库

npm install vue-baidu-map --save

4.2 在Vue项目中引入百度地图API

在main.js中引入百度地图Vue插件：

import Vue from 'vue'
import VueBaiduMap from 'vue-baidu-map'

Vue.use(VueBaiduMap, {
  ak: 'your_baidu_map_ak' // 替换为你的百度地图AK值
})

4.3 创建地图组件

创建一个地图组件Map.vue，用于展示地图和小区标注：

<template>
  <div class="map-container">
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap">
      <!-- 定位 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" />
      <!-- 城市列表 -->
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
      <!-- 缩放工具 -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 视图切换 -->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <!-- 标注 -->
      <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>
    </baidu-map>
  </div>
</template>

<script>
import { getCommunityMap } from '@/api/sys/community'

export default {
  name: 'Map',
  data() {
    return {
      center: {
        lng: 116.3755,
        lat: 39.80896
      },
      zoom: 12,
      mapData: []
    }
  },
  methods: {
    initMap({ BMap, map }) {
      this.center.lng = 116.4146
      this.center.lat = 40.11316
      map.enableScrollWheelZoom()
      map.enableKeyboard()
      map.enableDoubleClickZoom()
      getCommunityMap().then(res => {
        this.mapData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .bm-view {
    width: 100%;
    height: 620px;
  }
</style>

二、实现功能说明

1. 前端部分：

• 使用vue-baidu-map组件库，通过<baidu-map>标签创建百度地图。
• 使用<bm-marker>标签在地图上添加小区标注，并通过<bm-label>标签显示小区名称。
• 在地图初始化时，调用后端接口获取小区数据，并将其展示在地图上。

2. 后端部分：

• 创建Community实体类，用于存储小区信息。
• 使用MyBatis-Plus的CommunityMapper和CommunityService来操作数据库，获取小区数据。
• 创建CommunityController，提供/community/getCommunityMap接口，返回小区数据供前端调用。

三、实现效果