SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）-CSDN博客

本文链接：https://blog.csdn.net/IronmanJay/article/details/127828246

本文详细介绍了如何在基于SpringBoot和Vue的后台管理系统项目中集成高德地图，包括点标记、信息窗体、路线规划和定位功能的实现步骤，提供了关键代码示例，并分享了项目资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章目录

项目资源下载

文章目录

系列文章目录
项目资源下载
前言
一、高德开放平台的使用
二、点标记功能的实现
三、信息窗体功能的实现
四、路线规划功能的实现
五、定位功能的实现
总结

前言

今天的主要内容包括：高德开放平台的使用、点标记功能的实现、窗体信息功能的实现、路线规划功能的实现、定位功能的实现等。下面就开始今天的学习吧！

一、高德开放平台的使用

我们使用高德开放平台|高德地图API进行项目的功能集成，首先肯定是要登录，这里有很多种登陆方式
登陆完之后选择控制台
然后这里需要认证一下，填入自己的个人相关信息即可
认证方式选择“个人认证开发者”即可
最后再完善一下信息就可以了
当我们认证成功之后，再次进入控制台，创建关于地图的应用
按照我的选择就行，最后点击新建
然后点击编辑
然后再为此应用添加key
按照我填的内容照着填就行，最后点击提交
当我们再次刷新时，发现已经成功生成了key和安全密钥。此时我们已经完成了基础信息的生成，下面就开始正式在项目中集成高德地图

二、点标记功能的实现

在views下新建Map.vue，用于创建我们的地图页面
然后在后台新增关于地图页面的路由信息
然后给管理员分配这个页面的权限
重新登陆之后管理员就有这个页面的权限了
然后在public下面的index.html中引入高德地图的资源文件，需要注意其中的key，读者要改为自己刚才申请的key
然后将Map.vue中的全部内容替换为如下内容

<template>
    <div>
        <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
    </div>
</template>

<script>
    export default {
        name: "Map",
        mounted() {
            // 创建地图实例
            var map = new AMap.Map("container", {
                zoom: 13,
            })
            var marker = new AMap.Marker({
                position: new AMap.LngLat(126.685649, 45.779939),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '哈尔滨工程大学',
            })
            // 将创建的点标记添加到已有的地图示例
            map.add(marker);
        }
    }
</script>

<style scoped>

</style>

然后来到前端测试，发现已经可以成功显示点标记了

三、信息窗体功能的实现

再将Map.vue全部替换为如下内容即可

<template>
    <div>
        <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
    </div>
</template>

<script>

    var content = [
        "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
    ];

    export default {
        name: "Map",
        mounted() {
            // 创建地图实例
            var map = new AMap.Map("container", {
                zoom: 13,
            })

            var infoWindow = new AMap.InfoWindow({
                anchor: 'top-right',
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });

            var clickHandler = function (e) {
                console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');
                infoWindow.open(map, [126.685649, 45.779939]);
            };
            var marker = new AMap.Marker({
                position: new AMap.LngLat(126.685649, 45.779939),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '哈尔滨工程大学',
                icon: '//vdata.amap.com/icons/b18/1/2.png',
            })
            marker.on('click', clickHandler);
            // 将创建的点标记添加到已有的地图示例
            map.add(marker);
        }
    }
</script>

<style scoped>

</style>

然后来到前端发现，已经可以成功显示信息窗口了

四、路线规划功能的实现

将Map.vue中的内容全部替换为如下内容

<template>
    <div>
        <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
    </div>
</template>

<script>

    var content = [
        "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
    ];

    export default {
        name: "Map",
        mounted() {
            // 创建地图实例
            var map = new AMap.Map("container", {
                zoom: 13,
                resizeEnable: true,
            })

            var infoWindow = new AMap.InfoWindow({
                anchor: 'top-right',
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });

            var clickHandler = function (e) {
                console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');
                infoWindow.open(map, [126.685649, 45.779939]);
            };
            var marker = new AMap.Marker({
                position: new AMap.LngLat(126.685649, 45.779939),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '哈尔滨工程大学',
                icon: '//vdata.amap.com/icons/b18/1/2.png',
            })
            marker.on('click', clickHandler);
            // 将创建的点标记添加到已有的地图示例
            map.add(marker);

            // path 是驾车导航的起、途径和终点，最多支持16个途经点
            var path = []

            path.push([126.656681,45.795415])
            path.push([126.682553,45.771883])
            path.push([126.702603,45.791997])

            map.plugin('AMap.DragRoute', function () {
                var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
                // 查询导航路径并开启拖拽导航
                route.search()
            })

            var polyLine = new AMap.Polyline({
                path: path,
                strokeWeight: 5,
                borderWeight: 5, // 线条宽度，默认为 1
                strokeStyle: "solid",
                strokeColor: '#DC143C', // 线条颜色
                lineJoin: 'round' // 折线拐点连接处样式
            })
            map.add(polyLine)

        }
    }
</script>

<style scoped>

</style>

来到前端发现已经成功显示路线规划图了

五、定位功能的实现

将Map.vue中的全部内容替换为如下内容

<template>
    <div>
        <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
        <div id="info"></div>
    </div>
</template>

<script>

    var content = [
        "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
    ];

    export default {
        name: "Map",
        mounted() {
            // 创建地图实例
            var map = new AMap.Map("container", {
                zoom: 13,
                resizeEnable: true,
            })

            var infoWindow = new AMap.InfoWindow({
                anchor: 'top-right',
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });

            var clickHandler = function (e) {
                console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');
                infoWindow.open(map, [126.685649, 45.779939]);
            };
            var marker = new AMap.Marker({
                position: new AMap.LngLat(126.685649, 45.779939),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '哈尔滨工程大学',
                icon: '//vdata.amap.com/icons/b18/1/2.png',
            })
            marker.on('click', clickHandler);
            // 将创建的点标记添加到已有的地图示例
            map.add(marker);

            // path 是驾车导航的起、途径和终点，最多支持16个途经点
            var path = []

            path.push([126.656681, 45.795415])
            path.push([126.682553, 45.771883])
            path.push([126.702603, 45.791997])

            map.plugin('AMap.DragRoute', function () {
                var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
                // 查询导航路径并开启拖拽导航
                route.search()
            })

            var polyLine = new AMap.Polyline({
                path: path,
                strokeWeight: 5,
                borderWeight: 5, // 线条宽度，默认为 1
                strokeStyle: "solid",
                strokeColor: '#DC143C', // 线条颜色
                lineJoin: 'round' // 折线拐点连接处样式
            })
            map.add(polyLine)

            // 实例化城市查询类
            map.plugin('AMap.Geolocation', function () {
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                    // 定位按钮的停靠位置的偏移量
                    offset: [10, 20],
                    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    zoomToAccuracy: true,
                    //  定位按钮的排放位置,  RB表示右下
                    position: 'RB'
                })

                geolocation.getCurrentPosition(function (status, result) {
                    if (status == 'complete') {
                        onComplete(result)
                    } else {
                        onError(result)
                    }
                });

                function onComplete(data) {
                    // data是具体的定位信息
                    console.log(data)
                }

                function onError(data) {
                    // 定位出错
                    console.error(data)
                }
            })

        }
    }
</script>

<style scoped>

</style>