vue3自定义高德地图组件
时间: 2025-02-07 15:32:16 浏览: 46
### 创建基于 Vue3 的自定义高德地图组件
#### 安装依赖
为了在项目中集成高德地图,需先安装 `vue-amap` 插件。通过命令行工具执行如下指令来完成插件的安装:
```bash
npm install vue-amap@latest --save
```
此操作会将最新版本的 `vue-amap` 添加到项目的依赖列表中[^1]。
#### 初始化配置
接着,在应用入口文件(通常是 main.js 或 app.vue)里引入并初始化 AMap SDK 和 vue-amap 插件:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
// 导入 vue-amap 并设置 key
import VueAMap from '@vuemap/vue-amap-tile';
const app = createApp(App);
app.use(VueAMap, {
key: 'your_amap_api_key', // 替换成自己的key
});
app.mount('#app');
```
上述代码完成了对 vue-amap 的全局注册,并传入了必要的参数如 API Key 等信息[^2]。
#### 自定义组件开发
现在可以创建一个新的 Vue 组件用于展示高德地图。这里给出一个简单的实现方式作为参考:
```html
<template>
<el-card class="box-card">
<!-- 地图容器 -->
<a-map :center="mapCenter" @click="handleClick"></a-map>
<!-- 显示点击位置的信息框 -->
<p v-if="clickedPosition">您选择了地点:<br>{{ clickedPosition }}</p>
</el-card>
</template>
<script setup>
import { ref } from 'vue';
import { ElCard } from 'element-plus';
let mapCenter = ref([116.397428, 39.90923]); // 默认中心点坐标
let clickedPosition = ref('');
function handleClick(e) {
console.log('地图被单击:', e.lnglat);
let lngLatStr = `${e.lnglat.getLng()}, ${e.lnglat.getLat()}`;
clickedPosition.value = lngLatStr;
}
</script>
<style scoped>
.box-card {
width: 100%;
height: 50vh;
}
.amap-container {
width: 100%;
height: 100%;
}
</style>
```
这段代码展示了如何利用 `<a-map>` 标签构建地图视图,并监听用户的鼠标点击事件以获取所选地理位置的数据[^3]。
阅读全文
相关推荐

















