vue3怎么使用高德地图
时间: 2023-12-05 19:05:09 浏览: 31
要在 Vue3 中使用高德地图,可以使用 Vue AMap 库。下面是使用 Vue AMap 的步骤:
1. 安装 Vue AMap 和 AMap JS API
```
npm install vue-amap
```
在你的 HTML 文件中添加以下代码:
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
```
2. 在 main.js 中引入 Vue AMap 并注册组件
```
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['AMap.Geolocation']
});
```
3. 在组件中使用 AMap 组件
```
<template>
<div>
<amap :center="center" :zoom="zoom">
<amap-marker :position="center"></amap-marker>
</amap>
</div>
</template>
<script>
export default {
data() {
return {
center: [116.397428, 39.90923],
zoom: 13
};
}
};
</script>
```