vue中引入地图插件

简介: vue中引入地图插件

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

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

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

5bfdcd64a1a54aca86ac62276438b35c.png

这里需要在 自己创建的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);
};

如果有什么不对的地方欢迎提醒我,谢谢

相关文章
|
1月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
582 0
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
35 4
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
31 2
|
1月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
48 0
|
2月前
|
JavaScript
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明,并展示了粒子特效的实现效果。同时,提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码,以及完整代码的下载链接。
|
2月前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
3月前
Vue3拖拽插件(vuedraggable@next)
vuedraggable 是一款 Vue2 拖拽插件,可轻松实现列表项的拖拽排序与交互。通过简单配置,即可在不同区域间拖动元素并实现数据同步。支持多种事件监听和自定义样式。
232 2
Vue3拖拽插件(vuedraggable@next)
|
3月前
|
JavaScript API UED
Vue3使用触摸滑动插件(Swiper)
本文介绍如何在Vue2项目中使用Swiper插件实现触摸滑动功能,并封装了两种轮播图展示形式:首页轮播图(`type: banner`)和走马灯轮播图(`type: carousel`),以及信息展播模式(`type: broadcast`)。支持自定义轮播图片、区域尺寸、动画效果等属性。通过示例代码展示了不同切换动画及自定义效果,并提供了在线预览。适用于多种应用场景,提升用户体验。
Vue3使用触摸滑动插件(Swiper)
|
2月前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
|
1月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
33 0