系列文章目录
- 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客(一)
- Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客(二)
- Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(三)
- SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(四)
- SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客(五)
- SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(六)
- SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)
- SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客(八)
- Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(九)
- SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客(十)
- Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客(十一)
- SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客(十二)
- SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客(十三)
- SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客(十四)
- SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客(十五)
- SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客(十六)
- SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客(十七)
- SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客(十八)
- 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客(十九)
- SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客(二十)
- SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客(二十一)
- SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客(二十二)
- SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)
项目资源下载
前言
今天的主要内容包括:高德开放平台的使用、点标记功能的实现、窗体信息功能的实现、路线规划功能的实现、定位功能的实现等。下面就开始今天的学习吧!
一、高德开放平台的使用
- 我们使用高德开放平台|高德地图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>
- 来到前端发现已经可以成功定位到用户所在的城市了。这样我们就完成了SpringBoot集成高德地图的功能
总结
以上就是今天学习的全部内容,明天将会给大家带来关于SpringBoot和Vue集成视频播放组件的相关内容。明天见!