高德地图API入门使用vue

文章目录

      • 最终效果
      • 一、在高德的开放平台申请key
      • 二、下载依赖:
      • 三、完整代码

最终效果

页面显示高德地图
在这里插入图片描述

一、在高德的开放平台申请key

在高德的开放平台申请key: https://console.amap.com/dev/key/app
申请的类型为web端(js api)
否则会报错:<AMap JSAPI> KEY异常,错误信息:USERKEY_PLAT_NOMATCH
在这里插入图片描述

二、下载依赖:

npm install @amap/amap-jsapi-loader

三、完整代码


<template>  <div>      <div id="container" ref="amap"></div>  </div></template>  <script>  import AMapLoader from '@amap/amap-jsapi-loader';  export default {  name: "Class",  data() {  return {  };  },  created() {  this.initAMap();  },  methods: {  initAMap() {  AMapLoader.load({  key: '', // 申请好的keyversion: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15          plugins: []  // 需要使用的的插件列表,如比例尺'AMap.Scale'等,如果是地图控件,必须再 map.addControl添加  })  .then((AMap) => {  this.map = new AMap.Map('container', {  // 设置地图容器id  //viewMode: '3D', // 默认2d地图模式  zoom: 12, // 初始化地图级别  zooms: [5, 30], // 地图缩放范围  // 可以设置初始化当前位置  center: [116.397428, 39.90923] // 初始化地图位置  })  })  },  }  };  
</script>  <style scoped lang="scss">  #container {  padding: 0px;  margin: 0px;  width: 100%;  height: 900px;  }  
</style>

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

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

相关文章

LeetCode45:跳跃游戏Ⅱ

题目描述 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n …

如何防止源代码泄露?6种企业防泄密解决方案

在数字化转型浪潮中&#xff0c;源代码成为企业宝贵的核心资产&#xff0c;其安全性直接关系到企业的生存和发展。源代码泄露不仅会导致商业秘密外泄&#xff0c;还可能造成严重的经济损失和品牌信誉下降。为此&#xff0c;采用高效的防泄密措施&#xff0c;如华企盾DSC数据防泄…

php7.4在foreach中对使用数据使用无法??[]判读,无法使用引用传递

代码如下图&#xff1a;这样子在foreach中是无法修改class_history的。正确的应该是去掉??[]判断。 public function actionY(){$array [name>aaa,class_history>[[class_name>一班,class_num>1],[class_name>二班,class_num>2]]];foreach ($array[class_…

Linux环境下的编译和调试

本文目录 一、编译1. gcc/g编译器2. gcc/g安装3. 代码编译过程4. gcc编译 二、调试1. 下载gdb调试器2. gdb 调试器使用步骤 一、编译 1. gcc/g编译器 对于.c 格式的 C 文件&#xff0c;可以采用 gcc 或 g编译。 对于.cc、.cpp 格式的 C文件&#xff0c;应该采用 g进行编译。 …

密文域可逆信息隐藏技术综述(上)

加密图像可逆信息隐藏是一种加密原始图像后&#xff0c;在密文图像中可逆地隐藏附加数据&#xff0c;并且在数据提取后&#xff0c;原始图像可以被无损重建的技术。RDH-EI的分类如图1所示。 按对图像的加密方法&#xff0c;现有RDH-EI算法可分为对称加密域和非对称(公钥)加密域…

form1弹出子窗体form2,拖动子窗体判断是否离开父窗体区域,含源码(学习笔记)

一、效果&#xff08;进入和离开&#xff09; 子窗体到达父窗体边缘时变色。 二、代码分析 判断父窗体的目的&#xff0c;可以控制子窗体要随父窗体走。上面代码需要加以处理。 如&#xff1a;this.Location new Point(parentPoint.X distanceFromEdge, this.Location.Ydis…

抖音上线“星绘”APP,它有着什么样的特殊之处?

抖音上线“星绘”APP 前言 就在4月25日&#xff0c;抖音在App Store上线了一款名为“星绘”的App。该App以妙鸭相机为对标产品&#xff0c;拥有着强大的AI生图能力&#xff0c;而产品中的“AI分身”也十分有特色&#xff0c;那么这款“星绘”App究竟如何呢&#xff1f;我们接着…

2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包

本文来自&#xff1a;2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包 - 源码1688 应用介绍 简介&#xff1a; 2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包 自行检查后门&#xff0c;最好是部署智能合约后用合约地址来授权 包含转账支付页面盗U授…

Dokcer容器分布式搭建LNMP+wordpress论坛

目录 引言 一、架构环境 二、搭建容器 &#xff08;一&#xff09;自定义网络 &#xff08;二&#xff09;搭建nginx容器 1.文件准备 2.查看与编辑文件 3.生成镜像 4.创建容器 &#xff08;三&#xff09;搭建MySQL容器 1.文件准备 2.查看与编辑文件 3.生成镜像 …

python自动化操作docx

使用Python自动化处理Word文档 在日常工作中&#xff0c;我们经常需要处理大量的Word文档&#xff0c;这时自动化脚本就显得尤为重要。本文将介绍如何使用Python中的python-docx库来创建和修改Word文档。 安装python-docx库 在开始之前&#xff0c;确保你已经安装了python-d…

LabVIEW自动剪板机控制系统

LabVIEW自动剪板机控制系统 随着工业自动化的快速发展&#xff0c;钣金加工行业面临着生产效率和加工精度的双重挑战。传统的手动或脚踏式剪板机已无法满足现代生产的高效率和高精度要求&#xff0c;因此&#xff0c;自动剪板机控制系统的研究与开发成为了行业发展的必然趋势。…

解决Uncaught TypeError: Cannot read properties of null (reading ‘getAttribute‘)

问题&#xff1a; 用了element ui 的echart ,初始化时候找不到指定id的元素&#xff0c;导致的问题&#xff0c;如下 浏览器控制台输出的错误信息如下 Echars echarts.min.js:22 Uncaught TypeError: Cannot read properties of null (reading getAttribute)at echarts.min.…

动手学深度学习——从零实现softmax分类模型

1. 数据集 fashion mnist是一个由10个类别图像组成的服装分类数据集&#xff0c;共包含60000张训练集图像和10000张测试集图像&#xff0c; 前者用于训练模型参数&#xff0c;后者用于评估模型性能。 2.1 数据集下载 先进行依赖库导入&#xff1a; %matplotlib inline …

图像识别应用技术

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

Akamai 分布式“云+边缘”,打造下一代数字化基座

当下&#xff0c;数字化基础设施正逐步向分布式部署演化&#xff0c;云计算与边缘计算正在成为两大技术支柱。Gartner 数据显示&#xff0c;云服务占 IT 整体支出比例连年上涨&#xff0c;在过去一年已增长至12.1%&#xff1b;IDC 报告显示&#xff0c;截至2021年已有超过500亿…

Grafana页面嵌入自建Web应用页面

目录 一、应用场景 二、实现方式 1、修改Grafana配置文件 2、获取监控页面url 3、隐藏左侧和顶部菜单 一、应用场景 需要将Grafana监控页面嵌入自建Web应用页面&#xff0c;使Grafana监控页面成为自建Web应用的一部分。 二、实现方式 总体思路&#xff1a;修改Grafana配…

C++之STL-list+模拟实现

目录 一、list的介绍和基本使用的方法 1.1 list的介绍 1.2 list的基本使用方法 1.2.1 构造方法 1.2.2 迭代器 1.2.3 容量相关的接口 1.2.4 增删查改的相关接口 1.3 关于list迭代器失效的问题 二、模拟实现list 2.1 节点类 2.2 迭代器类 2.3 主类list类 2.3.1 成员变…

多线程同步

1.多线程并发 1).多线程并发引例 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <assert.h> #include <pthread.h>int wg0; void *fun(void *arg) {for(int i0;i<1000;i){wg;printf("wg%d\n",wg);} } in…

tp6.0 rabbitmq死信队列

rabbitMq交换机&#xff0c;队列情况&#xff0c;先手动创建 1. 创建普通交换机exchange&#xff0c;普通队列order_queue_expire&#xff0c;队列设置属性&#xff1a; 消息过期时间&#xff1a;60000毫秒&#xff0c;过期绑定dead_exchange交换机&#xff0c;routing_key:de…

web前端学习笔记2

2. 网页穿上美丽外衣 2.0 代码地址 https://gitee.com/qiangge95243611/java118/tree/master/web/day02 2.1 什么是CSS CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文…