JeecgBoot集成高德地图API：POI检索与路径规划
JeecgBoot集成高德地图API：POI检索与路径规划
项目地址: https://gitcode.com/GitHub_Trending/je/JeecgBoot 你是否还在为企业级应用开发中的地理位置功能实现而烦恼？从地图展示到POI（兴趣点）检索，再到复杂的路径规划，每个环节都需要繁琐的代码编写和API调试。本文将带你从零开始，在JeecgBoot低代码平台中快速集成高德地图API，实现地图可视化、POI检索和路径规划功能，让你的应用轻松具备专业的地理位置服务能力。
技术选型与准备工作
JeecgBoot作为企业级低代码平台，提供了灵活的扩展机制，适合集成第三方API服务。高德地图API提供了全面的LBS（基于位置的服务）能力，包括地图展示、POI检索、路径规划等核心功能，且文档完善，国内访问速度快。
环境要求
- JeecgBoot 3.x版本
- JDK 1.8+
- Maven 3.5+
- 高德地图开发者账号（注册地址）
高德地图API Key申请
- 登录高德开放平台控制台
- 创建应用，选择"Web服务API"类型
- 记录申请到的Key，后续将用于API调用
项目集成步骤
1. 添加依赖配置
在JeecgBoot项目的后端模块中添加HTTP客户端依赖，用于调用高德地图API。修改jeecg-boot/jeecg-module-demo/pom.xml，添加以下依赖：
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.76</version>
</dependency>
2. 配置高德API参数
在jeecg-boot/jeecg-module-demo/src/main/resources/application.yml中添加高德地图API配置：
高德地图API配置：
amap:
api:
key: your_amap_web_service_key
poi-search-url: https://restapi.amap.com/v3/place/text
direction-url: https://restapi.amap.com/v3/direction/driving
3. 创建API调用服务接口
创建高德地图API调用服务接口，文件路径：jeecg-boot/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/test/service/AmapApiService.java
@Service
public class AmapApiService {
@Value("${amap.api.key}")
private String apiKey;
@Value("${amap.api.poi-search-url}")
private String poiSearchUrl;
@Value("${amap.api.direction-url}")
private String directionUrl;
/**
* POI关键字搜索
*/
public String searchPoi(String keywords, String city) {
Map<String, String> params = new HashMap<>();
params.put("key", apiKey);
params.put("keywords", keywords);
params.put("city", city);
params.put("extensions", "all");
return HttpUtil.get(poiSearchUrl, params);
}
/**
* 驾车路径规划
*/
public String drivingRoute(String origin, String destination) {
Map<String, String> params = new HashMap<>();
params.put("key", apiKey);
params.put("origin", origin);
params.put("destination", destination);
params.put("strategy", "10"); // 躲避拥堵策略
return HttpUtil.get(directionUrl, params);
}
}
4. 实现控制器层
创建地图服务控制器，处理前端请求，文件路径：jeecg-boot/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/test/controller/MapController.java
@RestController
@RequestMapping("/map/amap")
public class MapController extends JeecgController<JeecgDemo, IJeecgDemoService> {
@Autowired
private AmapApiService amapApiService;
/**
* POI检索
*/
@GetMapping("/poi/search")
public Result<?> searchPoi(String keywords, String city) {
String result = amapApiService.searchPoi(keywords, city);
return Result.ok(JSONObject.parseObject(result));
}
/**
* 路径规划
*/
@GetMapping("/route/driving")
public Result<?> drivingRoute(String origin, String destination) {
String result = amapApiService.drivingRoute(origin, destination);
return Result.ok(JSONObject.parseObject(result));
}
}
前端界面实现
1. 引入高德地图JS API
在Vue页面中引入高德地图JS API，使用国内CDN地址确保访问速度：
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_web_key"></script>
2. 创建地图组件
创建地图展示组件，文件路径：jeecg-boot/jeecg-module-demo/src/main/resources/frontend/views/demo/map/amap-index.vue
<template>
<div class="amap-page-container">
<a-card title="高德地图POI检索与路径规划">
<div id="container" class="map-container"></div>
<div class="search-bar">
<a-input v-model="keywords" placeholder="请输入POI关键词" style="width: 300px" />
<a-select v-model="city" style="width: 150px; margin-left: 10px">
<a-select-option value="beijing">北京</a-select-option>
<a-select-option value="shanghai">上海</a-select-option>
</a-select>
<a-button type="primary" @click="searchPoi" style="margin-left: 10px">搜索</a-button>
</div>
<div class="route-panel">
<a-input v-model="origin" placeholder="起点坐标（经度,纬度）" style="width: 200px" />
<a-input v-model="destination" placeholder="终点坐标（经度,纬度）" style="width: 200px; margin-left: 10px" />
<a-button type="primary" @click="searchRoute" style="margin-left: 10px">规划路线</a-button>
</div>
</a-card>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
keywords: '',
city: 'beijing',
origin: '116.397428,39.90923',
destination: '116.481488,39.990464',
markers: []
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
// 初始化地图
this.map = new AMap.Map('container', {
zoom: 11,
center: [116.397428, 39.90923],
viewMode: '3D'
})
// 添加地图控件
this.map.addControl(new AMap.ToolBar())
this.map.addControl(new AMap.Scale())
},
// POI检索
searchPoi() {
// 清除已有标记
this.map.remove(this.markers)
this.markers = []
this.$api({
url: '/map/amap/poi/search',
method: 'get',
params: {
keywords: this.keywords,
city: this.city
}
}).then(res => {
if (res.data.status === '1') {
res.data.pois.forEach(poi => {
const marker = new AMap.Marker({
position: poi.location.split(','),
title: poi.name
})
this.markers.push(marker)
// 添加信息窗体
const infoWindow = new AMap.InfoWindow({
content: `<div><h3>${poi.name}</h3><p>${poi.address}</p></div>`
})
marker.on('click', () => {
infoWindow.open(this.map, marker.getPosition())
})
})
this.map.add(this.markers)
// 调整地图视野
this.map.setFitView(this.markers)
}
})
},
// 路径规划
searchRoute() {
this.$api({
url: '/map/amap/route/driving',
method: 'get',
params: {
origin: this.origin,
destination: this.destination
}
}).then(res => {
if (res.data.status === '1') {
const path = res.data.route.paths[0]
// 绘制路线
const polyline = new AMap.Polyline({
path: path.polyline.split(';').map(lnglat => lnglat.split(',')),
strokeColor: '#3366FF',
strokeWeight: 5
})
this.map.add(polyline)
// 添加起点终点标记
this.addMarker(this.origin, '起点', '#00FF00')
this.addMarker(this.destination, '终点', '#FF0000')
// 调整地图视野
this.map.setFitView([polyline, ...this.markers])
}
})
},
addMarker(position, title, color) {
const marker = new AMap.Marker({
position: position.split(','),
title: title,
icon: new AMap.Icon({
size: new AMap.Size(30, 30),
image: `https://webapi.amap.com/theme/v1.3/markers/n/mark_${color === '#00FF00' ? 'g' : 'r'}_bs.png`
})
})
this.markers.push(marker)
this.map.add(marker)
}
}
}
</script>
<style scoped>
.map-container {
width: 100%;
height: 600px;
margin-bottom: 20px;
}
.search-bar, .route-panel {
margin-bottom: 15px;
}
</style>
3. 配置路由
在路由配置文件中添加地图页面路由，文件路径：jeecg-boot/jeecg-module-demo/src/main/resources/frontend/src/router/modules/demo.js
{
path: '/amap-index',
name: 'AmapIndex',
component: () => import('@/views/demo/map/amap-index'),
meta: { title: '高德地图POI检索与路径规划', icon: 'map' }
}
功能实现与测试
POI检索功能
POI检索功能允许用户根据关键词和城市搜索兴趣点，如餐馆、酒店、景点等。核心实现基于高德地图的POI搜索API，支持关键词搜索、周边搜索和多边形搜索等多种检索方式。
API参数说明
| 参数名 | 说明 | 是否必填 |
|---|---|---|
| keywords | 搜索关键词 | 是 |
| city | 城市编码或名称 | 否 |
| types | POI类型编码 | 否 |
| offset | 每页记录数 | 否，默认20 |
| page | 当前页码 | 否，默认1 |
示例代码
调用POI搜索API的关键代码位于AmapApiService.java的searchPoi方法，通过HTTP GET请求高德地图的POI搜索接口，传递必要的参数，并返回JSON格式的结果。
路径规划功能
路径规划功能支持驾车、步行、公交等多种出行方式的路线规划。以下是驾车路径规划的实现，基于高德地图的路径规划API，支持躲避拥堵、高速优先、避免收费等多种策略。
API参数说明
| 参数名 | 说明 | 是否必填 |
|---|---|---|
| origin | 起点坐标（经度,纬度） | 是 |
| destination | 终点坐标（经度,纬度） | 是 |
| strategy | 路线策略 | 否，默认0 |
| waypoints | 途经点 | 否 |
策略说明
| 策略值 | 说明 |
|---|---|
| 10 | 躲避拥堵 |
| 13 | 不走高速 |
| 14 | 避免收费 |
| 19 | 高速优先 |
项目结构与扩展建议
项目结构说明
jeecg-boot/jeecg-module-demo/
├── src/main/java/org/jeecg/modules/demo/test/
│ ├── controller/
│ │ └── MapController.java // 地图功能控制器
│ ├── service/
│ │ ├── AmapApiService.java // 高德API调用服务
│ │ └── impl/
│ └── entity/ // 相关实体类
└── src/main/resources/frontend/views/demo/map/
└── amap-index.vue // 地图展示页面
功能扩展建议
-
添加地理编码功能：实现地址与经纬度之间的转换，可使用高德地图的地理/逆地理编码API。
-
实现距离计算：基于高德地图的距离测量API，计算多个点之间的距离。
-
添加地图围栏功能：结合高德地图的地理围栏API，实现区域监控功能。
-
优化前端体验：添加自动完成提示、历史记录等功能，提升用户体验。
总结与注意事项
通过本文的步骤，我们成功在JeecgBoot项目中集成了高德地图API，实现了地图展示、POI检索和路径规划功能。关键注意事项：
-
API Key安全：避免将API Key直接暴露在前端代码中，应通过后端代理调用。
-
接口限流处理：高德地图API有调用频率限制，生产环境中应添加限流和缓存机制。
-
错误处理：完善API调用错误处理，如网络异常、API返回错误等情况的提示。
-
坐标转换：注意高德地图使用GCJ-02坐标系，与其他坐标系（如WGS84）之间需要进行转换。
本项目的完整代码可在jeecg-module-demo模块中查看，更多高德地图API功能可参考高德地图开放平台文档。
通过JeecgBoot的低代码特性和高德地图API的强大功能，我们可以快速为企业应用添加专业的地理位置服务，提升应用的实用性和竞争力。
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)