SpringBoot-Vue整合百度地图

2025/2/5 11:10:16 来源：https://blog.csdn.net/m0_62909831/article/details/145381087 浏览: 次关键词：SpringBoot-Vue整合百度地图

文章目录

一、Spring Boot整合百度地图的步骤
- 1. 申请百度地图的AK值
- 2. 创建实体类
- 3. 创建Controller层
- 4. 前端集成百度地图
- - 4.1 在Vue项目中安装百度地图Vue组件库
  - 4.2 在Vue项目中引入百度地图API
  - 4.3 创建地图组件
二、实现功能说明
- 1. 前端部分：
- 2. 后端部分：
三、实现效果

在现代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 {@Autowiredprivate 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-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></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.4146this.center.lat = 40.11316map.enableScrollWheelZoom()map.enableKeyboard()map.enableDoubleClickZoom()getCommunityMap().then(res => {this.mapData = res.data})}}
}
</script><style lang="scss" scoped>.bm-view {width: 100%;height: 620px;}
</style>