Vue使用高德地图(快速上手)

1.在高德平台注册账号

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

 3.安装依赖

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

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

4.导入 AMapLoade

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

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

  /**
     * Date:2024/3/7
     * Author:zx
     * 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/518365.html

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

相关文章

单细胞RNA测序(scRNA-seq)SRA数据下载及fastq-dumq数据拆分

单细胞RNA测序(scRNA-seq)入门可查看以下文章: 单细胞RNA测序(scRNA-seq)工作流程入门 单细胞RNA测序(scRNA-seq)细胞分离与扩增 1. NCBI查询scRNA-seq SRA数据 NCBI地址: https…

前视声呐目标识别定位(六)-代码解析之目标截图并传输

前视声呐目标识别定位(一)-基础知识 前视声呐目标识别定位(二)-目标识别定位模块 前视声呐目标识别定位(三)-部署至机器人 前视声呐目标识别定位(四)-代码解析之启动识别模块 …

51单片机实验02- P0口流水灯实验

目录 一、实验的背景和意义 二、实验目的 三、实验步骤 四、实验仪器 五、实验任务及要求 1,从led4开始右移 1)思路 ①起始灯 (led4) ②右移 2)效果 3)代码☀ 2,从其他小灯并向右依…

服务器设置了端口映射之后外网还是访问不了服务器

目录 排查思路参考: 1、确认服务是否在运行 2、确认端口映射设置是否正确 3、使用防火墙测试到服务器的连通性 4、检查服务内部的配置 5、解决办法 6、学习小分享 我们在一个完整的网络数据存储服务系统设备中都会存有业务服务器、防火墙、交换机、路由器&a…

【Laravel】09 用模型批量赋值简化代码 数据库关系

【Laravel】09 用模型批量赋值简化代码 & 数据库关系 1. 用模型批量赋值简化代码2. 数据库关系 1. 用模型批量赋值简化代码 原来存储一个值 2. 数据库关系 这里可以看到两个SQL是一样的

STM32之HAL开发——不同系列SPI功能对比(附STM32Cube配置)

不同系列STM32——SPI框图 F1系列框图 F4系列框图 TI模式时序图特性 F7系列框图 H7系列框图 注意:F7系列以及H7系列支持Quad-SPI模式,可以连接单,双或者四条数据线的Flash存储介质。 SPI——Cube配置流程 RCC时钟源配置 SYS系统调试模式配…

Spring 详细总结

文章目录 第一章 IOC容器第一节 Spring简介1、一家公司2、Spring旗下的众多项目3、Spring Framework①Spring Framework优良特性②Spring Framework五大功能模块 第二节 IOC容器概念1、普通容器①生活中的普通容器②程序中的普通容器 2、复杂容器①生活中的复杂容器②程序中的复…

MySQL、Oracle查看字节和字符长度个数的函数

目录 0. 总结1. MySQL1.1. 造数据1.2. 查看字符/字节个数 2. Oracle2.1. 造数据2.2. 查看字符/字节个数 0. 总结 databasecharbyteMySQLchar_length()length()Oraclelength()lengthB() 1. MySQL 1.1. 造数据 sql drop table if exists demo; create table demo (id …

Cesium 批量种树

1、准备树种建模 分各种级别建模LOD1-LODN 其中meta.json长这样: Gltf再3Dmax中导出Obj,再通过ObjToGltf的工具转换,参考 https://editor.csdn.net/md/?articleId96484597 2、准备shp点数据。(shp中的点位就是种树的位置) 3、准…

【并发编程】线程安全

线程安全 1. 讲一下 synchronized 关键字的底层原理 1.1 基本使用 如下抢票的代码,如果不加锁,就会出现超卖或者一张票卖给多个人 synchronized,同步【对象锁】采用互斥的方式让同一时刻至多只有一个线程能持有【对象锁】 其它线程再想获…

多模态AI全解析:概念、应用与风险

大家好,在人工智能的快速发展浪潮中,多模态学习作为一项革命性技术,正逐渐改变着我们与机器交互的方式。 自OpenAI推出ChatGPT以来,人工智能已经从处理单一文本输入的单模态工具,迈向了能够理解和生成包括文本、图像、…

【算法】【floodfill】洪水灌溉

文章目录 1. 岛屿数量2. 岛屿最大面积3. 被围绕的区域4. 太平洋大西洋水流问题5. 扫雷游戏6. 机器人的运动范围 1. 岛屿数量 👉🔗题目链接 给你一个由 ‘1’(陆地)和 ‘0’(水)组成的的二维网格&#xff0…

查看MySQL版本的方式

文章目录 一、使用cmd输入命令行查看二、在mysql客户端服务器里查询 一、使用cmd输入命令行查看 1、打开 cmd ,输入命令行: mysql --version 2、还是打开cmd,输入命令行:mysql -V (注意了,此时的V是个大写的V) 二、…

unity之 “Allow ‘unsafe‘ code“ 在哪里。

导入unity中的代码,出现如下错误,该如何解决? Unsafe code may only appear if compiling with /unsafe. Enable "Allow unsafe code" in Player Settings to fix this error 解决这个问题,只需要设置就可以。 设置的地…

深入理解计算机系统 家庭作业 2.80

/* 网上很多都没说清楚到底出题人是什么用意,用意就是既要又要,既要不溢出,又要不丢失精度.所以就分开处理,在丢失之前把丢失的部分保存下来,然后两部分算好再相加. 可以先看一下我的2.79题 用的是先乘后除 会溢出 符合题意 2.80要求的是先除后成 不会溢出 但会丢失精度 核…

C++中二叉搜索树的模拟实现(二叉搜索树是map,set的底层原理)

搜索二叉树 定义 搜索二叉树:左子树小于根,右子树大于根.搜索二叉树的中序序列是升序的.所以对于二叉树而言,它的左子树和右子数都是二叉搜索树 下图就是二叉搜索树 二叉搜索树的性质: 二叉搜索树的中序遍历出的数据是有序的,并且二叉树搜索树在查找某个数的时候,一般情况下…

9proxy—数据采集工具全面测评

9Proxy数据采集工具Unlock the web with 9Proxy, the top residential proxy provider. Get unlimited bandwidth, affordable prices, and secure HTTPS and Socks5 configurations.https://9proxy.com/?utm_sourceblog&utm_mediumcsdn&utm_campaignyan 前言 在当今数…

如何实现仿微信界面[我的+首页聊天列表+长按菜单功能+添加菜单功能]

如何实现仿微信界面[我的首页聊天列表长按菜单功能添加菜单功能] 一、简介 如何实现仿微信界面[我的首页聊天列表长按菜单功能添加菜单功能] 采用 uni-app 实现,可以适用微信小程序、其他各种小程序以及 APP、Web等多个平台 具体实现步骤如下: 下载…

Windows 2008虚拟机安装、安装VM Tools、快照和链接克隆、添加硬盘修改格式为GPT

一、安装vmware workstation软件 VMware workstation的安装介质,获取路径: 链接:https://pan.baidu.com/s/1AUAw_--yjZAUPbsR7StOJQ 提取码:umz1 所在目录:\vmware\VMware workstation 15.1.0 1.找到百度网盘中vmwa…

【Android】App通信基础架构相关类源码解析

应用通信基础架构相关类源码解析 这里主要对Android App开发时,常用到的一些通信基础类进行一下源码的简单分析,包括: Handler:处理器,与某个Looper(一个线程对应一个Looper)进行关联。用于接…