vue中引入地图插件

简介: vue中引入地图插件

当我们在写项目时,有时会遇见需要用到地图

现在我为大家写一个简单的获取地图的插件

在这个index.html文件里写入script src路径

这里需要在自己创建的vue 文件里写一个div设置宽高

<div class="map" id="map"></div>

这里引入这个import

import { nextTick, onMounted } from "vue";

在这里输入这串代码即可

onMounted(() => {  
    nextTick(() => {
    initMap();
  });
});
var map = ref(null);
const initMap = () => {
  map = new AMap.Map("map", {
    pitch: 15, // 地图俯仰角度,有效范围 0 度- 83 度
    viewMode: "3D", // 地图模式
    position: [116.39, 39.9],
  });
  map.add(map);
};
目录
相关文章
|
数据可视化 数据处理
结构化分析与设计
一、结构化分析与设计 结构化分析与设计(Structured Analysis and Design,简称SAD)是一种软件开发方法论,旨在通过分析和设计来构建高质量的软件系统。 结构化分析与设计的主要特点包括以下几点: 1. 结构化分析:结构化分析是通过对系统需求进行分析,将系统分解为若干个功能模块,并定义它们之间的关系和交互。在结构化分析中,常用的工具和技术包括数据流图(Data Flow Diagram,简称DFD)、数据字典(Data Dictionary)和实体关系图(Entity-Relationship Diagram,简称ERD)等。 2. 结构化设计:结构化设计是在结构化分析
969 2
|
机器学习/深度学习 Python
概率论常见面试问题总结,含答案
概率论常见面试问题总结,含答案
|
数据可视化 测试技术
一文了解软件测试规范
软件测试规范是测试工作的依据和准则,在进行软件测试时,应在相关国标文件的要求和指导下完成测试工作,这样可以从根本上保证软件测试工作的质量,进而提升软件产品的质量。 一个完整的软件测试规范应该包括对规范本身的详细说明,例如规范的目的、范围、文档结构、词汇表、参考信息、可追溯性、方针、过程/规范、指南、模板、检查表、培训、工具、参考资料等。
1454 0
一文了解软件测试规范
|
存储 数据库
微信云开发--云函数--联表查询( lookup 的使用方法详解)
微信云开发--云函数--联表查询( lookup 的使用方法详解)
377 0
|
存储 监控 Linux
C语言 多路复用 select源码分析
本文详细介绍了阻塞IO与非阻塞IO的概念及其在Linux系统中的实现方式。首先阐述了常见的IO模型,包括阻塞型、非阻塞型及多路复用IO模型。阻塞IO模型会在IO请求未完成时阻塞进程,而非阻塞IO模型则允许在IO未完成时立即返回。非阻塞IO可通过设置`O_NONBLOCK`标志实现。接着介绍了多路复用IO模型,利用`select`、`poll`和`epoll`等系统调用监控多个文件描述符。`select`函数通过内核检测文件描述符是否就绪,并通知调用者。
锁屏组件新能力实现问题之在Activity中锁屏状态下显示悬浮窗的实现如何解决
锁屏组件新能力实现问题之在Activity中锁屏状态下显示悬浮窗的实现如何解决
308 0
|
JavaScript 前端开发 安全
TypeScript的主要优势有哪些?
【6月更文挑战第1天】TypeScript的主要优势有哪些?
375 9
|
存储 消息中间件 Kubernetes
云原生时代消息中间件Pulsar(介绍、集群安装部署、管理页面安装部署) 2
云原生时代消息中间件Pulsar(介绍、集群安装部署、管理页面安装部署)
1911 0
|
JSON API 数据格式
如何利用API接口获取电商平台数据?
作为产品经理,我们需要了解电商平台的数据情况,以便更好地制定产品策略和优化用户体验。而利用API接口获取电商平台数据是一种高效、便捷的方式。本文将从以下几个方面介绍如何利用API接口获取电商平台数据。