springboot+vue 集成高德地图

集成高德地图需要分为前端和后端两个部分来实现。

1. 后端实现

- 在 pom.xml 文件中添加高德地图的依赖：

<dependency>
    <groupId>com.amap.api</groupId>
    <artifactId>amap-java-sdk</artifactId>
    <version>1.4.3</version>
</dependency>

- 在 application.properties 文件中添加高德地图的配置：

# 高德地图配置
amap.key=your amap key

- 在 Spring Boot 的配置类中添加以下代码，将高德地图的 key 注入到 bean 中：

@Configuration
public class AmapConfig {

    @Value("${amap.key}")
    private String amapKey;

    @Bean
    public AMap aMap() {
        return new AMap(amapKey);
    }
}

- 在 Controller 中编写对外接口，通过调用高德地图 SDK 实现相应的功能。

2. 前端实现

- 在 index.html 中添加高德地图的 JavaScript SDK：

<script src="//webapi.amap.com/maps?v=1.4.15&key=your amap key"></script>

- 在 Vue 组件中添加地图容器：

<template>
    <div id="map"></div>
</template>

- 在 Vue 组件的 mounted 方法中初始化地图：

mounted() {
    // 初始化地图
    this.initMap();
},
methods: {
    initMap() {
        // 创建地图
        this.map = new AMap.Map("map", {
            center: [116.397428, 39.90923],
            zoom: 13
        });
    }
}

这样，就完成了 Spring Boot 和 Vue 的高德地图集成。具体实现可以参考高德地图的官方文档和示例。