vue2+高德地图web端开发使用
创建vue2项目
我们创建一个vue2项目,创建vue2项目就不用再多说了吧,使用“vue create 项目名 ”创建即可
注册高德地图
高德地图官网地址:https://lbs.amap.com/
如果是第一次使用,点击注册然后进入我们的控制台

注册完之后进入控制台,找到我的应用

点击创建新的应用


点击添加

选择web端开发,最好写上域名白名单,勾选下面的单选框,最后进行提交

按照步骤全部弄好之后就完成了注册
最后你会获得你注册的key和安全密钥,是我们后面使用的关键
官网地址:https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
使用
打开项目,安装loader
npm i @amap/amap-jsapi-loader --save 在component目录下新建Map组件

在< script >中引入AMapLoader
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {securityJsCode: '你的安全密钥'
}
export default {}
</script>完整代码
<template><div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {securityJsCode: '你的安全密钥'
}
export default {data() {return {map: null}},methods: {initMap() {AMapLoader.load({key: "你的key", // 申请好的Web端开发者Key,首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: [''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", { //设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 5, //初始化地图级别center: [105.602725, 37.076636], //初始化地图中心点位置});}).catch(e => {console.log(e);})},},mounted() {//DOM初始化完成进行地图初始化this.initMap()}
}
</script>
<style scoped>
#container {padding: 0px;margin: 0px;width: 100vw;height: 100vh;
}
</style>
效果图

相关文章:
vue2+高德地图web端开发使用
创建vue2项目我们创建一个vue2项目,创建vue2项目就不用再多说了吧,使用“vue create 项目名 ”创建即可注册高德地图高德地图官网地址:https://lbs.amap.com/如果是第一次使用,点击注册然后进入我们的控制台注册完之后进入控制台&…...
01背包问题c++
问题 问题介绍 有 N 种物品和一个容量是 V 的背包,每种物品都有无限件可用。 第 i 种物品的体积是 vi,价值是 wi。 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大。 输出最大价值。 输入格式 第…...
ZYNQ硬件调试-------day2
ZYNQ硬件调试-------day2 1.ILA(Integrated Logic Analyzer ) 监控逻辑内部信号和端口信号;可以理解为输出。可单独使用 2.VIO(Virtual Input/Output ) 实时监控和驱动逻辑内部信号和端口信号,可以理解为触发输入。不可…...
JavaScript中Promise的简单使用及其原理
Promise是ES6最重要的特性之一,今天来系统且细致的研究一下Promise的用法以及原理。 按照我往常的理解,Promise是一个构造函数,有all、resolve、reject、then、catch等几个方法,一般情况下,在涉及到异步操作时才会用到…...
SpringBoot RabbitMQ 延时队列取消订单【SpringBoot系列14】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见。 程序员每天的CV 与 板砖,也要知其所以然,本系列课程可以帮助初学者学习 SpringBooot 项目开发 与 SpringCloud 微服务系列项目开发 1 项目准备 SpringBoot 雪花算法生成商品订单…...
【论文阅读 WWW‘23】Zero-shot Clarifying Question Generation for Conversational Search
文章目录前言MotivationContributionsMethodFacet-constrained Question GenerationMultiform Question Prompting and RankingExperimentsDatasetResultAuto-metric evaluationHuman evaluationKnowledge前言 最近对一些之前的文章进行了重读,因此整理了之前的笔记…...
ouc 网络安全实验 格式化字符串漏洞
文章目录要求lab1lab2lab3lab4结语因为当时自己做实验的时候出现了很多疑问不会解决,在网上看到了一位大佬 王森ouc 的专栏文章解决了很多问题,也学到了很多知识和解决问题的方法,现在把我的实验解决方法也发上来,希望有不会的同…...
PMSM矢量控制笔记(1.1)——电机的机械结构与运行原理
前言:重新整理以前的知识和文章发现,仍然有许多地方没有学得明白,懵懵懂懂含含糊糊的地方多如牛毛,尤其是到了真正实际写东西或者做项目时,如果不是系统的学习了知识,很容易遇到问题就卡壳,也想…...
2022年全国职业院校技能大赛(中职组)网络安全竞赛试题——中间人攻击渗透测试解析(详细)
B-4任务四:中间人攻击渗透测试 *任务说明:仅能获取Server4的IP地址 *任务说明:仅能获取Server11的IP地址 1.通过上题渗透后得到控制权限的服务器场景Server4进行查看本地的arp缓存表的操作,并将该操作所使用的命令作为Flag值提交; 2.通过上题渗透后得到控制权限的服务…...
MySQL必知必会 | 安全、维护、性能
全球化和本地化 关于MySQL处理不同字符集和语言 字符集和校对顺序 数据库被用来存储和检索数据,不同的语言和字符集需要以不同的方式存储和检索,因此,MySQL需要适应不同的字符集,适应不同的排序方式 一些术语: 字符…...
MaaS Model as a Service 模型即服务
大模型是人工智能的发展趋势和未来。大模型是“大算力强算法” 结合的产物。目前,大模型生态已初具规模。大模型能够实现 AI 从“手工作坊”到“工厂模式”的转变,大模型通常是在大规模无标注 数据上进行训练,学习出一种特征和规则…...
【编程基础】027.C语言中函数在解题中的应用(三)
文章目录C语言中函数的应用1、自定义函数实现二维数组的转置2、自定义函数之整数处理3、自定义函数之数字后移4、自定义函数之字符串拷贝C语言中函数的应用 1、自定义函数实现二维数组的转置 题目描述 写一个函数,使给定的一个二维数组(3&a…...
echart图表之highcharts
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、HighCharts是什么?二、使用步骤1.引入库2.前端代码3.展现结果4.后台自动截图总结前言 提示:这里可以添加本文要记录的大概内容&…...
关于.Net和Java的看法——我见过最牛的一个小实习生经历
1、背景 笔者(小方同学在学习)是一个专科院校的一名普通学生,目前就职于某三线城市的WEB方面.Net开发实习生,在找实习期间和就业期间的一些看法,发表此文,纯个人想法,欢迎讨论,指正…...
基于springboot+vue的“智慧食堂”程序设计实现【毕业论文,源码】
系统登录界面系统架构开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7数据库工具:Navicat开发软件:eclipse/myeclipse/ideaMaven包:Maven浏览器…...
学计算机选择什么编程语言好一些?
工资水平的话,目前人工智能、大数据和云计算等领域的工资相对较高,但是要求也高,学历,学习能力什么的。然后是后端开发,Python、Java、C等编程语言的工资普遍较高。 不用开发语言的优势 Java:Java是一种…...
持续集成 在 Linux 上搭建 Jenkins,自动构建接口测试
本篇把从 0 开始搭建 Jenkins 的过程分享给大家,希望对小伙伴们有所帮助。 文章目录 在 Linux 上安装 Jenkins在 Linux 上安装 Git在 Linux 上安装 Python在 Linux 上安装 Allure配置 Jenkinsjenkins 赋能 - 使用邮箱发送测试报告jenkins 赋能 - 优化测试报告内容…...
MySQL学习笔记(总结)
1. 数据库服务器操作命令 启动数据库:net start mysql80 (注释:windows命令) 停止数据库:net stop mysql80 (注释:windows命令) 重启数据库:systemctl restart mysql;…...
Android开发 Layout布局 ScrollView
1.LinearLayout 属性 orientation:内部组件排列方式,可选vertical、horizontal,默认horizontal layout_weight: 与平级组件长宽比例,需要将layout_width、layout_height其中一个设置为0dp,表明长或宽与平级组件的长…...
手撕数据结构与算法——树(三指针描述一棵树)
🏆作者主页:king&南星 🎄专栏链接:数据结构 🏅文章目录🌱树一、🌲概念与定义二、🌳定义与预备三、🌴创建结点函数四、🍀查找五、🍁插入六、&a…...
手把手推导NCP1380准谐振反激公式:用Mathcad复现ON官方计算书(附推导过程)
从零推导NCP1380准谐振反激公式:Mathcad实战全解析 当电源工程师第一次打开NCP1380官方计算书时,那些看似魔术般直接呈现的公式往往让人既兴奋又困惑。兴奋的是有了现成的设计工具,困惑的是这些公式背后的物理本质和数学逻辑被隐藏在技术文档…...
智能视觉自动化革命:Midscene如何让AI成为你的界面操作员
智能视觉自动化革命:Midscene如何让AI成为你的界面操作员 【免费下载链接】midscene Let AI be your browser operator. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene 你是否曾幻想过用自然语言就能控制浏览器、手机应用甚至桌面软件&#x…...
别再乱用.pem和.key了!用ASN.1 Editor手把手拆解RSA私钥的PKCS#8格式(附OpenSSL 3.1验证)
从文件后缀到密钥本质:用ASN.1 Editor透视RSA私钥的PKCS#8结构 当你在终端输入openssl genpkey -algorithm RSA生成密钥对时,是否曾好奇过.pem文件里那些看似随机的字符究竟隐藏着什么秘密?面对invalid key format的错误提示,又是…...
Mermaid CLI:从文本到图表的自动化解决方案
Mermaid CLI:从文本到图表的自动化解决方案 【免费下载链接】mermaid-cli Command line tool for the Mermaid library 项目地址: https://gitcode.com/gh_mirrors/me/mermaid-cli 引言:技术文档中的图表困境 在软件开发过程中,技术文…...
从希腊字母到优化问题:用Overleaf搞定LaTeX数学公式的20个高阶技巧
从希腊字母到优化问题:用Overleaf搞定LaTeX数学公式的20个高阶技巧 数学公式排版是LaTeX最强大的功能之一,但对于需要处理复杂数学内容的研究者和工程师来说,仅掌握基础语法远远不够。本文将分享20个经过实战验证的高阶技巧,帮助你…...
Windows Insider离线管理完全指南:无账户切换方法与命令行操作技巧
Windows Insider离线管理完全指南:无账户切换方法与命令行操作技巧 【免费下载链接】offlineinsiderenroll 项目地址: https://gitcode.com/gh_mirrors/of/offlineinsiderenroll 在Windows系统管理中,用户常常面临需要在不同更新通道间切换的需求…...
Phi-3-Mini-128K应用场景:新能源电池BMS固件日志智能归因与故障预测
Phi-3-Mini-128K应用场景:新能源电池BMS固件日志智能归因与故障预测 想象一下,你是一家新能源车企的BMS(电池管理系统)软件工程师。凌晨三点,你的手机响了,生产线告警:一批电池包的固件在测试中…...
QDKTAI实战面试题50问之41-50
一、逐题详细解析(41-50题)第41题:如何设计一个有效的AI内容审核系统?1. 考察重点对大模型“生成式而非判别式”核心特性的理解识别AI审核场景中的关键冲突点(长文本处理、语气/风格干扰)针对性解决方案的设…...
ARM A53上跑通1080P实时EIS防抖?手把手教你优化特征点与透视变换(附代码思路)
ARM A53实战:1080P实时EIS防抖的7个关键优化策略 当行车记录仪的镜头在颠簸路面剧烈晃动,或是运动相机在冲浪时被海浪拍打,画面稳定性的价值就凸显出来。传统光学防抖受限于物理结构,而电子防抖(EIS)通过算法补偿成为嵌入式设备的…...
Revolut警告支持高耗能AI和加密货币业务可能面临声誉风险
英国银行应用Revolut表示,由于支持加密货币和AI等高耗能行业,公司可能面临声誉风险,同时该公司公布去年利润增长57%。这家金融科技公司在等待监管批准五年后,现在终于可以作为正式的英国银行启动业务。Revolut在其2025年年报中警告…...
