springboot + Vue前后端项目（第二十记）

项目实战第二十记

写在前面
1. 高德地图官网
2. 开发文档
3. 集成高德地图
- 3.1 在public文件夹下创建config.js
- 3.2 index.html（在项目启动文件中引入外部的js）
- 3.3 点标记（用点标记当前位置）
- 3.4 信息窗体（点击当前位置，弹出当前位置信息介绍）
- 3.5 路线规划（行车轨迹）
- 3.6 定位（定位所在城市位置）
总结
写在最后

写在前面

本篇主要讲解系统集成高德地图的简单应用

1. 高德地图官网

https://lbs.amap.com/

a, 在控制台下创建应用

b, 添加key（后面开发需要用上key和秘钥）

在这里插入图片描述

2. 开发文档

开发文档说明地址
获取某个地方的经纬度链接

3. 集成高德地图

3.1 在public文件夹下创建config.js

如下图所示：

在这里插入图片描述

var gloableConfig = {"key": "21e6448a80093b98bbe496326xxx", // 高德地图的key（配合秘钥使用的key）开发环境使用"secretKey": "d41253368f29e52ce9eaed3d6xxx", // 高德地图的秘钥（配合key使用的秘钥）开发环境使用
};

3.2 index.html（在项目启动文件中引入外部的js）

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script src="./static/config.js"></script><script type="text/javascript">// 高德地图秘钥，必须在加载JSAPI load.js文件之前window._AMapSecurityConfig = {securityJsCode: gloableConfig.secretKey  // 开发环境使用}</script>// xxx写自己的key<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=xxx&plugin=AMap.Driving&plugin=AMap.CitySearch&AMap.Geolocation"></script></body>
</html>

== 注： static 文件夹下的config.js（用来绑定秘钥）==

var gloableConfig = {"key": "21e6448a80093b98bbe496326979xxx", // 高德地图的key（配合秘钥使用的key）开发环境使用"secretKey": "d41253368f29e52ce9eaed3d63xxx", // 高德地图的秘钥（配合key使用的秘钥）开发环境使用
};

3.3 点标记（用点标记当前位置）

通过菜单管理建立高德地图菜单，并新建Map.vue组件

<template><div><div id="container" style="width: 100%;height: calc(100vh - 100px)"></div></div>
</template>
<script>
export default {name: "Map",data(){return {};},created(){},mounted(){// 创建地图实例const map = new AMap.Map("container", {zoom: 13, //地图级别// 滕王阁经纬度center: [115.88112000000001, 28.681510000000014],// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式// viewMode: "2D", //设置地图模式});//知识点1（点标记），创建一个 Marker 实例：const marker = new AMap.Marker({position: new AMap.LngLat(115.88112000000001, 28.681510000000014),//position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: "滕王阁",});//将创建的点标记添加到已有的地图实例：map.add(marker);},
}
</script>

效果图如下所示：
在这里插入图片描述

3.4 信息窗体（点击当前位置，弹出当前位置信息介绍）

<template><div><div id="container" style="width: 100%;height: calc(100vh - 100px)"></div></div>
</template>
<script>
export default {name: "Map",data(){return {};},created(){},mounted(){// 创建地图实例const map = new AMap.Map("container", {zoom: 13, //地图级别//115.938187,28.6839center: [115.938187, 28.6839],//center: [116.397428, 39.90923], //地图中心点 北京// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式// viewMode: "2D", //设置地图模式});//知识点1（点标记），创建一个 Marker 实例：const marker = new AMap.Marker({position: new AMap.LngLat(115.88112000000001, 28.681510000000014),//position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: "滕王阁",});// 知识点2，定义信息窗体//信息窗体的内容var content = ["<div><b>滕王阁</b></b>","电话 : 0791-xxx   邮编 : 3300xxx","地址 :  江西省南昌市青山湖区xxxx</div>",];//创建 infoWindow 实例var infoWindow = new AMap.InfoWindow({content: content.join("<br>"), //传入字符串拼接的 DOM 元素anchor: "top-left",   // 显示位置});//  当点击地图某个点获取经纬度var clickHandler = function(e) {console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');//打开信息窗体infoWindow.open(map, map.getCenter()); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。};marker.on('click',clickHandler);//将创建的点标记添加到已有的地图实例：map.add(marker);},
}
</script>

效果图如下：
在这里插入图片描述

3.5 路线规划（行车轨迹）

<template><div><div id="container" style="width: 100%;height: calc(100vh - 100px)"></div></div>
</template>
<script>
export default {name: "Map",data(){return {};},created(){},mounted(){// 创建地图实例const map = new AMap.Map("container", {zoom: 13, //地图级别//115.938187,28.6839// center: [115.938187, 28.6839],//center: [116.397428, 39.90923], //地图中心点 北京// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式// viewMode: "2D", //设置地图模式});// 3, 路径规划，需要密钥的配置AMap.plugin("AMap.DragRoute", function () {//path 是驾车导航的起、途径和终点，最多支持16个途经点var path = [];path.push([116.303843, 39.983412]);path.push([116.321354, 39.896436]);path.push([116.407012, 39.992093]);var route = new AMap.DragRoute(map, path, 0);//查询导航路径并开启拖拽导航route.search();});},
}
</script>

效果图如下所示：
在这里插入图片描述

3.6 定位（定位所在城市位置）

<template><div><div id="container" style="width: 100%;height: calc(100vh - 100px)"></div></div>
</template>
<script>
export default {name: "Map",data(){return {};},created(){},mounted(){// 创建地图实例const map = new AMap.Map("container", {zoom: 13, //地图级别//115.938187,28.6839// center: [115.938187, 28.6839],//center: [116.397428, 39.90923], //地图中心点 北京// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式// viewMode: "2D", //设置地图模式});// 4，定位城市信息  需要引入好插件  （定位不准确）AMap.plugin('AMap.CitySearch', function () {var citySearch = new AMap.CitySearch()citySearch.getLocalCity(function (status, result) {if (status === 'complete' && result.info === 'OK') {//查询成功，result即为当前所在城市信息map.setCity(result.city);console.log('===>',result);}})})},
}
</script>

result的数据结构：

{adcode: "360000"bounds: {className: 'AMap.Bounds', southWest: t, northEast: t}city: "南昌市"info: "OK"infocode: "10000"province: "江西省"rectangle: "115.6786001,28.48182853;116.1596596,28.86719757"status: "1"
}