vue3引入高德地图流程(key和秘钥),仅需三步

步骤一:

申请key和秘钥

步骤二:

安装@amap/amap-jsapi-loader依赖

cnpm i @amap/amap-jsapi-loader
// 或者
yarn add @amap/amap-jsapi-loader

步骤三:

<template><div id="gdMapCon"></div>
</template>
<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted } from "vue";
let map: { destroy: () => void; } | null = null;window._AMapSecurityConfig = {securityJsCode: '你的秘钥',}
onMounted(() => {AMapLoader.load({key: "你的key", // 申请好的Web端开发者Key,首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {map = new AMap.Map("gdMapCon", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});}).catch((e) => {console.log(e);});
});onUnmounted(() => {map?.destroy();
});
</script>
<style scoped>
#gdMapCon {width: 1000px;height: 800px;
}
</style>

这样就可以了
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

好物设计- 实现区域图片变化自动截图

工具–Py即可 重点怎么获取窗口句柄? 使用 spyxx 可以获得句柄 (相当一个窗口的ID,无论窗口怎么变化ID不变我们都可以找到该窗口的详细信息) 替换句柄就可以,也可以不用句柄之间改截图区域 实战图片 import pygetwindow as gw import pyautogui import time import numpy a…

14:00面试,14:08就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

手机怎么设置每年公历或农历生日提醒?生日提醒设置小妙招

生日是一个人在一年中比较特殊的日子之一&#xff0c;人们通常希望能够在这一天得到亲朋好友的祝福和庆祝。然而&#xff0c;随着人们生活节奏的加快&#xff0c;很多人表示自己很容易忘记他人的生日&#xff0c;导致不能够及时送出祝福和礼物。如果经常忘记亲朋好友的生日&…

ardupilot开发 --- waf 篇

查看waf编译都有哪些可用选项&#xff1f; Tools/ardupilotwaf/boards.py 中查看。 怎么打开下面的条件编译&#xff1f; 只需在 Tools/ardupilotwaf/boards.py 中查找关键字 “ AP_RTC_ENABLED ”

【powershell】Windows环境powershell 运维之历史文件压缩清理

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&am…

vue 使用 html2canvas 截取图片保存

vue 使用 html2canvas 截取图片保存 好久没有写博文了&#xff0c;写够了&#xff0c;没啥想写的了&#xff0c;这个号算是废了&#xff0c;哎&#xff0c;气人啊&#xff01;越来越胖&#xff0c;越来越懒了。 html2canvas 简介 html2canvas是一个JavaScript库&#xff0c;它…

为你自己学laravel - 15 - model的更新和删除

为你自己学laravel。 model的部分。 这一次讲解的是model当中怎么从数据库当中更新数据和删除数据。 先从数据库当中抓出来资料。 当然我们是使用php artisan tinker进入到终端机。 我们的做法是想要将available这个栏位修改成为true。 第一种更新方法 上面我们就是修改了对…

python实现一个图片查看器——可拖动、缩放和颜色画笔

目录 0 前言1 准备工作2 窗口布局3 图片显示功能3 图片拖拽功能4 图片缩放功能&#xff08;难度大&#xff09;5 画笔功能6 颜色选择功能后记源码 0 前言 在现如今的数字时代&#xff0c;我们对于图片的需求越来越大。无论是在工作中&#xff0c;还是在日常生活中&#xff0c;…

学习使用echarts图表中formatter的用法,格式化数字金额,控制x轴、y轴展示长度

学习使用echarts图表中formatter的用法&#xff0c;格式化数字金额&#xff0c;控制x轴、y轴展示长度 控制金额长度两位小数&#xff0c;并去除多余.00效果图 控制文字长度完整代码 控制金额长度 series: [{name: ,type: bar,sort: none,label: { //饼图图形上的文本…

GitHub two-factor authentication开启教程

问题描述 最近登录GitHub个人页面动不动就有一个提示框”… two-factor authentication will be required for your account starting Jan 4, 2024 …“&#xff0c;点击去看了一下原来是GitHub对所有的用户登录都要开启双重身份认证&#xff0c;要在1月4号前完成 解决办法 …

玩转大数据19:数据治理与元数据管理策略

随着大数据时代的到来&#xff0c;数据已经成为企业的重要资产。然而&#xff0c;如何有效地管理和利用这些数据&#xff0c;成为了一个亟待解决的问题。数据治理和元数据管理是解决这个问题的关键。 1.数据治理的概念和重要性 数据治理是指对数据进行全面、系统、规范的管理…

易点易动固定资产集成飞书,实现固定资产的一站式高效管理

在现代商业环境中&#xff0c;固定资产管理对于企业的运营和成功至关重要。然而&#xff0c;传统的资产管理方式往往繁琐、容易出错&#xff0c;并且缺乏实时性和准确性。为了解决这些挑战&#xff0c;易点易动与飞书进行了集成合作&#xff0c;推出了一种全新的解决方案&#…

common-pool的GenericObjectPool源码创建borrowObject方法研读

对象池主要管理对象的池&#xff0c;包含借用&#xff0c;归还&#xff0c;添加对象&#xff0c;校验对象是否有效等管理功能 public T borrowObject(final long borrowMaxWaitMillis) throws Exception {assertOpen();final AbandonedConfig ac this.abandonedConfig;if (ac …

ASP.NET Core面试题之Redis高频问题

&#x1f388;&#x1f388;在.NET后端开发岗位中&#xff0c;如今也少不了、微服务、分布式、高并发高可用相关的面试题&#x1f388;&#x1f388; &#x1f44d;&#x1f44d;本文分享一些整理的Redis高频面试题&#x1f389; &#x1f44d;&#x1f44d;机会都是给有准备…

Springboot访问html页面

目录 1、html页面创建 2、打开application.properties,添加如下配置 3、Controller中的代码 4、测试效果 项目结构如图 1、html页面创建 在原有的项目resouces目录下创建static包,并在static下创建pages,然后在pages包下index.html. index.html内容 <!DOCTYPE html>…

打破微软封印面向未来创建.NET Framework4.8工程

摘要&#xff1a; 工程从.NET Framework 4.8升级到.NET 8.0&#xff0c;即使采用官方方案也是很繁琐的一件事情&#xff0c;而且容易出问题。Windows 11内置了.NET Framework 4.8&#xff0c;所以当前的软件需要基于.NET Framework 4.8。但后续微软推出Windows 12&#xff0c;…

海康威视IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)

漏洞介绍 海康威视IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 Hikvision Intercom Broadcasting System 3.0.3_20201113_RELEASE(HIK)版本存在操作系统命令注入漏洞&#xff0c;该漏洞源于文件/ph…

Linux网络编程(一):网络基础(下)

参考引用 UNIX 环境高级编程 (第3版)黑马程序员-Linux 网络编程 1. 协议的概念 1.1 什么是协议 从应用的角度出发&#xff0c;协议可理解为 “规则”&#xff0c;是数据传输和数据解释的规则 假设&#xff0c;A、B双方欲传输文件&#xff0c;规定&#xff1a; 第一次&#xff…

基于vue-cli快速发布vue npm 包

一、编写组件 1. 初始化项目并运行 vue create vue-digital-countnpm run serve2. 组件封装 新建package文件夹 ​ 因为我们可能会封装多个组件&#xff0c;所以在src下面新建一个package文件夹用来存放所有需要上传的组件。 ​ 当然&#xff0c;如果只有一个组件&#xff…

Guava事件总线的应用与最佳实践

第1章&#xff1a;引言 走过路过不要错过&#xff01;今天&#xff0c;小黑带大家深入了解Guava事件总线&#xff08;EventBus&#xff09;。咱们先聊聊&#xff0c;为什么这个东西这么酷&#xff1f;如果你是一名Java开发者&#xff0c;肯定知道&#xff0c;管理复杂的应用程…