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

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

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

---

一、高德开放平台的使用

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

二、点标记功能的实现

1. 在views下新建Map.vue，用于创建我们的地图页面
   
2. 然后在后台新增关于地图页面的路由信息
   
3. 然后给管理员分配这个页面的权限
   
4. 重新登陆之后管理员就有这个页面的权限了
   
5. 然后在public下面的index.html中引入高德地图的资源文件，需要注意其中的key，读者要改为自己刚才申请的key
   
6. 然后将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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

三、信息窗体功能的实现

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

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

<script>

    var content = [
        "
这是信息窗口
"
    ];

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

            var infoWindow = new AMap.InfoWindow({
                anchor: 'top-right',
                content: content.join("
")  //传入 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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

四、路线规划功能的实现

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

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

<script>

    var content = [
        "
这是信息窗口
"
    ];

    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("
")  //传入 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

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

五、定位功能的实现

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

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

<script>

    var content = [
        "
这是信息窗口
"
    ];

    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("
")  //传入 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

2. 来到前端发现已经可以成功定位到用户所在的城市了。这样我们就完成了SpringBoot集成高德地图的功能
   

---

总结

  以上就是今天学习的全部内容，明天将会给大家带来关于SpringBoot和Vue集成视频播放组件的相关内容。明天见！