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);
};
目录
相关文章
|
4月前
|
JavaScript 前端开发
VUE组件:如何在Vue中实现组件的动态引入?
VUE组件:如何在Vue中实现组件的动态引入?
171 0
|
10月前
|
JavaScript 定位技术
vue3 引入天地图
vue3 引入天地图
212 0
|
6天前
|
资源调度
uniapp引入vant组件库
uniapp引入vant组件库
25 11
|
6天前
|
JavaScript
vue3引入vant完整步骤
vue3引入vant完整步骤
21 8
|
27天前
|
JavaScript 定位技术
Vue百度地图组件说明文档
Vue百度地图组件说明文档
48 0
|
5月前
|
JavaScript API
Vue中组件和插件有什么区别?
Vue中组件和插件有什么区别?
52 0
|
1月前
|
JavaScript 定位技术 容器
Vue项目中引入地图的详细教程
Vue项目中引入地图的详细教程
|
6月前
vue3引入uview-plus3.0移动组件库
vue3引入uview-plus3.0移动组件库
|
7月前
|
JavaScript 定位技术 容器
Vue(3). 如何将高德地图引入的vue中
Vue(3). 如何将高德地图引入的vue中
|
9月前
|
JavaScript 定位技术
vue3中引入百度地图
vue3中引入百度地图
258 0