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

news2024/11/25 2:46:48

项目实战第二十记

  • 写在前面
  • 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.6839
            center: [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"
}

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

总结

在系统中简单的使用高德地图

写在最后

如果此文对您有所帮助，请帅戈靓女们务必不要吝啬你们的Zan，感谢！！不懂的可以在评论区评论，有空会及时回复。
文章会一直更新

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1870092.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何预防和处理他人盗用IP地址？

如何预防和处理他人盗用IP地址？

IP地址的定义及作用 解释 IP 地址在互联网中的作用。它是唯一标识网络设备的数字地址&#xff0c;类似于物理世界中的邮政地址。 1、IP地址盗窃的定义 解释一下什么是IP地址盗用&#xff0c;即非法使用他人的IP地址或者伪造IP地址的行为&#xff0c;这种行为可能引发法律和安…
阅读更多...
DLMS/COSEM协议—（Green-Book）Gateway protocol

DLMS/COSEM协议—（Green-Book）Gateway protocol

DLMS/COSEM协议 — Gateway protocol 10.10 Gateway protocol &#xff08;网关协议&#xff09;10.10.1 概述10.10.2 网关协议 &#xff08;The gateway protocol&#xff09;10.10.3 HES在WAN/NN中作为发起者&#xff08;拉取操作&#xff09;10.10.4 LAN中的终端设备作为发起…
阅读更多...
数据库物理结构设计-定义数据库模式结构（概念模式、用户外模式、内模式）、定义数据库、物理结构设计策略

数据库物理结构设计-定义数据库模式结构（概念模式、用户外模式、内模式）、定义数据库、物理结构设计策略

一、引言 如何基于具体的DBMS产品&#xff0c;为数据库逻辑结构设计的结果&#xff0c;即关系数据库模式&#xff0c;制定适合应用要求的物理结构 1、在设计数据库物理结构前&#xff0c;数据库设计人员首先 要充分了解所用的DBMS产品的功能、性能和特点&#xff0c;包括提供…
阅读更多...
【最新综述】基于伪标签的半监督语义分割

【最新综述】基于伪标签的半监督语义分割

Semi-Supervised Semantic Segmentation Based on Pseudo-Labels: A Survey 摘要&#xff1a; 语义分割是计算机视觉领域的一个重要而热门的研究领域&#xff0c;其重点是根据图像中像素的语义对其进行分类。然而&#xff0c;有监督的深度学习需要大量数据来训练模型&#xff…
阅读更多...
Asm动态生成类和get and set方法

Asm动态生成类和get and set方法

asm在解析文件的时候是按照特定顺序进行分析的&#xff0c;首先是visit方法&#xff0c;做类相关的解析&#xff0c;然后是注解&#xff0c;然后是属性&#xff0c;最后才是方法&#xff0c;属性是在所有方法分析前面进行&#xff0c;也就是只有当class文件中的所有属性都遍历完…
阅读更多...
【Android11】开机启动日志捕捉服务

【Android11】开机启动日志捕捉服务

一、前言 制作这个功能的原因是客户想要自动的记录日志中的报错和警告到设备的内存卡里面。虽然开发者模式中有一个“bug report” 会在/data/user_de/0/com.android.shell/files/bugreports/目录下生成一个zip包记录了日志。但是客户觉得这个日志很难获取到他们需要的信息&am…
阅读更多...
无需劳师动众，让石油化工DCS集散控制系统轻松实现无线传输！

无需劳师动众，让石油化工DCS集散控制系统轻松实现无线传输！

石油化工中，为了保证较高的可靠性和安全性，大量使用的是DCS集散控制系统。与FCS现场总线的“现场采集，转换为数字信号来集中传输”不同，DCS系统为了避免由于线缆断裂或者节点问题导致整个控制系统失灵，采用“分散传输，集中采集”的方式，即每个传感器通过4-20mA的模拟量通…
阅读更多...
el-upload 上传图片及回显照片和预览图片,文件流和http线上链接格式操作

el-upload 上传图片及回显照片和预览图片,文件流和http线上链接格式操作

<div v-for"(info, index) in zsjzqwhxqList.helicopterTourInfoList" :key"info.id" >编辑上传图片// oss返回线上地址http链接格式&#xff1a;<el-form-itemlabel"巡视结果照片":label-width"formLabelWidth"><el…
阅读更多...
【MySQL】 -- 用户管理

【MySQL】 -- 用户管理

1. 权限 如果我们只能使用root用户&#xff0c;这样存在安全隐患。这时&#xff0c;就需要使用MySQL的用户管理。创建出非root用户&#xff0c;限制其权限。 权限这个概念拿出来就是用来限制非root用户的。这样从技术手段上保证了数据的安全性和完整性&#xff0c;防止有人删库…
阅读更多...
LeetCode11. 盛最多水的容器题解

LeetCode11. 盛最多水的容器题解

LeetCode11. 盛最多水的容器题解 题目链接&#xff1a; https://leetcode.cn/problems/container-with-most-water 示例 思路 暴力解法 定住一个柱子不动&#xff0c;然后用其他柱子与其围住面积&#xff0c;取最大值。 代码如下&#xff1a; public int maxArea1(int[]…
阅读更多...
麒麟系统安装Redis

麒麟系统安装Redis

一、背景 如前文&#xff08;《麒麟系统安装MySQL》&#xff09;所述。 二、下载Redis源码 官方未提供麒麟系统的Redis软件&#xff0c;须下载源码编译。 下载地址&#xff1a;https://redis.io/downloads 6.2.14版本源码下载地址&#xff1a;https://download.redis.io/re…
阅读更多...
ADI-DSP|在指定内存写入数据

ADI-DSP|在指定内存写入数据

一、LDF文件设置内存空间 user_data_test { TYPE(BW RAM) START(0x00380010) END(0x0039bfff) WIDTH(8) }//usr data dxe_user_data_bw BW{INPUT_SECTION_ALIGN(4)INPUT_SECTIONS( $OBJS_LIBS(user_data) )} > user_data_test 二、在C文件中设置数据 /************…
阅读更多...
2.x86游戏实战-跨进程读取血量

2.x86游戏实战-跨进程读取血量

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 接下来会写C/C代码&#xff0c;C/C代码不是很难&#xff0c;然后为了快速掌握逆向这个技能&#xff0c;我…
阅读更多...
List常用操作比for循环更优雅的写法

List常用操作比for循环更优雅的写法

private String name; //姓名 private Integer age; //年龄 private Integer departId; //所属部门id } List list new ArrayList<>(); 复制代码 简单遍历 使用lamada表达式之前&#xff0c;如果需要遍历list时&#xff0c;一般使用增强for循环&#xff0c;代码如…
阅读更多...
uboot基本使用网络命令和从服务器端下载linux内核启动

uboot基本使用网络命令和从服务器端下载linux内核启动

网络命令ip地址设置: setenv gmac_debug 0; setenv mdio_intf rgmii; setenv bootdelay 1; setenv ethaddr 00:xxxx:81:70; // mac地址 setenv ipaddr xxx; //开发板 IP 地址 setenv netmask 255.255.255.0; setenv gatewayip xxx.1; setenv serverip xxxx; //服…
阅读更多...
RP2040 开发，用 Arduino 通过 ADC 获取电压测量数据

RP2040 开发，用 Arduino 通过 ADC 获取电压测量数据

这两天测试了一下如何通过 RP2040 的内置 ADC 获取一个待测量的电压数据&#xff0c;RP2040 内置了4路ADC&#xff0c;分辨率是12bit&#xff0c;也就是说&#xff0c;可以获取4096阶的变化量&#xff0c;但第4个 ADC 已经用于测量芯片的内部温度&#xff0c;所以实际能用的仅有…
阅读更多...
YOLO模型评价指标

YOLO模型评价指标

在模型训练完成之后&#xff0c;需要对模型的优劣作出评估&#xff0c;YOLO系列算法的评价指标包括&#xff1a; 1. 准确率&#xff08;Precision&#xff09;&#xff1a;指模型预测为正样本中实际为正样本的比例。 &#x1d447;&#x1d443;、&#x1d439;&#x1d443;、…
阅读更多...
计算机方向国际学术会议推荐

计算机方向国际学术会议推荐

*华中师范大学伍伦贡联合研究院与南京大学联合主办 第三届人工智能、物联网和云计算技术国际会议&#xff08;AIoTC 2024&#xff09; 大会官网&#xff1a;www.icaiotc.net 时间地点&#xff1a;2024年9月13-15日&#xff0c;中国武汉 收录检索&#xff1a;EI Compendex&a…
阅读更多...
从一道算法题开始，爱上Python编程

从一道算法题开始，爱上Python编程

Python是一门简单易学、高效强大的编程语言&#xff0c;许多人因为它的便捷性和广泛应用而爱上编程。今天&#xff0c;我将通过一道有趣的算法题&#xff0c;带领大家一步步写出Python代码&#xff0c;并最终解决问题。希望通过这篇文章&#xff0c;能激发大家对Python编程的兴…
阅读更多...
从万里长城防御体系看软件安全体系建设@安全历史03

从万里长城防御体系看软件安全体系建设@安全历史03

长城&#xff0c;是中华民族的一张重要名片&#xff0c;是中华民族坚韧不屈、自强不息的精神象征&#xff0c;被联合国教科文组织列入世界文化遗产名录。那么在古代&#xff0c;长城是如何以其复杂的防御体系&#xff0c;一次次抵御外族入侵&#xff0c;而这些防御体系又能给软…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023