Vue使用高德地图

1.在高德平台注册账号

f48701e730334e19a1acde8a3071ee48.png

 2.我的 > 管理管理中添加Key

4c06d633511a4c62ad5c15a00cec0af7.png

 3.安装依赖

npm i @amap/amap-jsapi-loader --save

yarn add @amap/amap-jsapi-loader --save


4.导入 AMapLoade

   import AMapLoader from '@amap/amap-jsapi-loader';

5.直接上代码,做好了注释(初始化地图,地图点位标注,点击获取点位)


 

 /**
     * Date:2024/3/7
     * Author:zzc
     * Function:【初始化地图】
     * @param 无
     */
        const map = ref(null);  //创建地图对象
        const current_position = ref([]); //坐标信息
        // 添加声明(我用了ts  所以添加了声明)
        declare global {
            interface Window {
                _AMapSecurityConfig: {
                    securityJsCode: string;
                };
            }
        }
        function initMap() {
            //ts方式
            window._AMapSecurityConfig = {
                securityJsCode: '2f76e6002c827833b868c49c79c29ef5', //申请的秘钥
            }
            //js方式
            window._AMapSecurityConfig = {
                securityJsCode: ''//申请好的秘钥
            }

            AMapLoader.load({
                key:"0571e495604a2cc3688133e281444a75", // 申请好的Web端开发者Key,首次调用 load 时必填
                version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                // plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                map.value = new AMap.Map("containerGd",{  //设置地图容器id
                    viewMode:"2D",    //是否为3D地图模式
                    zoom:15,           //初始化地图级别
                    center: current_position.value, //初始化地图中心点位置
                });
                      // 创建一个标记点
                    const marker = new AMap.Marker({
                    position: current_position.value, // 标记点的位置
                    map: map.value, // 要添加标记点的地图对象
                });
 
                // 如果需要添加多个标记点,可以重复创建 AMap.Marker 对象,并设置不同的位置
                  // const marker2 = new AMap.Marker({
                  //     position: [116.407428, 39.90923],
                  //     map: map.value,
                  // });
 
 
                   // 监听地图的点击事件
                  // map.value.on('click', function(e:any) {
                  //     // 创建一个标记点
                  //     const marker = new AMap.Marker({
                  //         position: e.lnglat, // 点击位置的经纬度
                  //         map: map.value,
                  //     });
                  // });
              })
              
            }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初识ES(ES的基本概念、倒排索引、索引和文档的CRUD)

1、ES是什么? 一个开源的分布式搜索引擎,可以用来实现搜索、日志统计、分析、系统监控等功能。ES的底层是基于Lucene实现的。 Lucene是一个Java语言的搜索引擎类库。 什么是elastic stack(ELK)? elasticsearch。存储、…

实验室用进口高纯聚四氟乙烯材质PFA方盘抗酸碱耐高温PFA托盘

PFA方盘又称托盘:耐高温、耐腐蚀。 进口透明可溶性聚四氟乙烯方盘。可应用于成膜实验,样品液体脱漏等。能放在电热板上直接加热使用,也可以用于烘箱烘干,实验室腐蚀性样品的转移和搬运,防止腐蚀性液体洒落。 产品特性…

Python常用算法--解决数据结构问题【附源码】

一、约瑟夫环问题 解释:约瑟夫环(Josephus Problem)是一个著名的数学问题,它描述了一个关于围坐一圈的人进行游戏的场景。游戏规则是从一个人开始,顺序报数,每报到特定数目的人将会被排除出圈子,然后从被排除的下一人开始继续报数,游戏继续进行直到最后剩下一个人。 …

ETL工具-nifi干货系列 第九讲 处理器EvaluateJsonPath,根据JsonPath提取字段

1、其实这一节课本来按照计划一起学习RouteOnAttribute处理器(相当于java中的ifelse,switch case 控制语句),但是在学习的过程中遇到了一些问题。RouteOnAttribute 需要依赖处理器EvaluateJsonPath,所以本节课我们一起…

如何确定螺栓的载荷和扭矩——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 螺栓作为一种常见的紧固件,广泛应用于各种机械和设备中。正确确定螺栓的载荷及其扭矩对于确保设备的安全运行和延长其使用寿命至关重要。本文将探讨如何确定螺栓的载荷及其扭矩,帮助读者更好地理…

将excel,csv中合并块中某条记录的值应用到整个块(使用多行的值,来填充新列数据)。

背景描述 在excel中使用其它列的值,根据某种计算规则来填充另一列(或新列)很容易实现。但是如果需要根据合并块中的多行来填充列时,就不容易实现,由于对excel不是太常用,因此这里使用的命令行工具实现的。…

K8s学习三(Pod与探针)

深入学习Pod Pod配置文件 写一个自己的配置文件,nginx-po.yaml apiVersion: v1 #api文档版本 kind: Pod #资源类型对象,也可以配置为像Development,StatefulSet这一类的对象 metadata: # Pod相关的元数据,用于描述Pod的数据name: nginx-po…

4月7号总结

java学习 一.正则表达式 定义:正则表达式是一种用于描述字符串模式的表达式,通常被用于文本搜索、匹配和替换。它是一种强大的工具,可以在文本处理和文本分析中进行复杂的匹配和操作。 通过字符串引用里面的方法matches,然后执行…

【Web】纯萌新的CISCN刷题记录(1)

目录 [CISCN 2019华东南]Web11 [CISCN 2019华北Day2]Web1 [CISCN 2019初赛]Love Math [CISCN 2022 初赛]ezpop [CISCN 2019华东南]Double Secret [CISCN 2023 华北]ez_date [CISCN 2019华北Day1]Web1 [CISCN 2019华东南]Web4 [CISCN 2019华北Day1]Web2 [CISCN 2023 …

【Django开发】前后端分离美多商城项目第6篇:用户部分,1. 业务说明【附代码文档】

美多商城项目4.0文档完整教程(附代码资料)主要内容讲述:美多商城,项目准备1.B2B--企业对企业,2.C2C--个人对个人,3.B2C--企业对个人,4.C2B--个人对企业,5.O2O--线上到线下,6.F2C--工厂到个人。项目准备,配置1. 修改set…

微服务学习2

目录 一.网关路由 1.1.认识网关 1.2网关快速入门 1.2.1.创建项目 1.2.2.引入依赖 1.2.3.启动类 1.2.4.配置路由 1.3.路由过滤 二.网关登录校验 2.1网关请求处理流程 2.2网关过滤器 2.2.2网关过滤器 2.3自定义GlobalFilter 2.4.登录校验 2.4.1.JWT工具 2.4.2.登…

网络安全之代码签名证书申请

代码签名,作为一种数字安全机制,对于软件开发、分发及用户使用环节具有至关重要的意义。以下从六大方面阐述代码签名必不可少的重要性: 确保代码来源可信: 代码签名如同软件的“身份证”,通过数字证书对开发者身份进…

【每日刷题】Day4

【每日刷题】Day4 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 目录 1. 83. 删除排序链表中的重复元素 - 力扣(LeetCode) 2. 88. 合并两个有序数组 - 力扣(LeetCode&…

(Git) gitignore基础使用

文章目录 前言.gitignore 模式匹配注释 #转义 \直接匹配任意字符匹配 *单个字符匹配 ?目录分割 /多级目录 **范围匹配 []取消匹配 ! 检查是否生效父子文件END 前言 Git - gitignore Documentation (git-scm.com) 在使用git管理的项目中,可以通过.gitignore文件管理…

蓝桥杯考前复习三

1.约数个数 由乘法原理可以得出&#xff1a; import java.util.*; public class Main{static int mod (int)1e9 7;public static void main(String[] args){Map<Integer,Integer> map new HashMap<>(); //创建一个哈希表Scanner scan new Scanner(System.in);i…

FJSP:美洲狮优化算法(Puma Optimizar Algorithm ,POA)求解柔性作业车间调度问题(FJSP),提供MATLAB代码

一、柔性作业车间调度问题 柔性作业车间调度问题&#xff08;Flexible Job Shop Scheduling Problem&#xff0c;FJSP&#xff09;&#xff0c;是一种经典的组合优化问题。在FJSP问题中&#xff0c;有多个作业需要在多个机器上进行加工&#xff0c;每个作业由一系列工序组成&a…

LangChain-12 Routing By Semantic Similarity 让GPT根据不明确的问题 自动选择工具集 根据语义自动路由

问题背景 平常我们设计程序的时候&#xff0c;会这么写&#xff1a; // 随便举例 String type paramDTO.getType(); if (type.equals("吃饭")) {// do } else if (type.equals("喝水")) {// do } else {// do }此时如果type传入的不是数字&#xff0c;那…

C++:MySQL的事务概念与使用(四)

1、事务的概念 定义&#xff1a;事务是构成单一逻辑工作单元的操作集合&#xff0c;要么完整的执行&#xff0c;要么完全不执行。无论发生何种情况&#xff0c;DBS必须保证事务能正确、完整的执行。 性质&#xff1a;事务的四大ACID性质。 原子性(Atomicity)&#xff1a;一个事…

基于SpringBoot的“汽车租赁系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“汽车租赁系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 管理员登录界面图 管理员功能界面…

AWE2024酷开科技智能家居,让生活从此更智能!

随着科技的飞速发展&#xff0c;智能家居已经成为了人们生活中不可或缺的一部分。在这个领域里&#xff0c;酷开科技品类逐渐丰富&#xff0c;在AWE2024展会上展现出耀眼光芒&#xff0c;将全品类智能家电新品集结亮相&#xff01;让人们的生活更加便捷、舒适和智能化。 酷开K…