vue3+ts实现高德地图标记多个marker
时间: 2024-08-16 12:03:05 浏览: 38
在 Vue 3 中结合 TypeScript 使用高德地图 (AMap) 实现添加多个标记(Marker)可以分为以下几个步骤:
1. **安装依赖**:
首先需要安装 `vue-amap` 和 `typescript` 的支持库。你可以通过 npm 或者 yarn 进行安装:
```bash
npm install vue-amap @types/amapjs @types/vue --save
```
2. **配置 AMap SDK**:
在 `main.ts` 或者 `amap-vue.config.js` 中引入并初始化 AMap API:
```typescript
import { createApp } from 'vue'
import App from './App.vue'
import Amap from 'vue-amap'
Amap.initAMapApiLoader({
key: 'your_amap_key', // 在高德官网获取您的 API 密钥
plugin: ['AMap.Geolocation', 'AMap.Marker', 'AMap.PolyEditor'],
})
const app = createApp(App)
app.use(Amap).mount('#app')
```
3. **创建 Marker 组件**:
创建一个自定义组件,比如 `Marker.vue`,包含地址和点击事件:
```typescript
<template>
<div class="marker">
<a-amap-marker :position="position" @click="onClick"></a-amap-marker>
</div>
</template>
<script lang="ts">
import { Component, Prop } from 'vue'
import { AMapComponent, AMapPosition } from 'vue-amap';
export default class Marker extends AMapComponent {
@Prop({ required: true }) position!: AMapPosition;
onClick() {
console.log('Marker clicked:', this.position);
}
}
</script>
```
4. **在父组件中使用 Marker**:
父组件里实例化并传入地址数据:
```html
<template>
<div id="app">
<Marker v-for="(location, index) in locations" :key="index" :position="location" />
</div>
</template>
<script lang="ts">
import Marker from '@/components/Marker.vue';
export default {
components: {
Marker,
},
data() {
return {
locations: [
{ latitude: ..., longitude: ... }, // 标记点的经纬度
... // 添加更多的标记点
],
};
},
};
</script>
```
5. **样式及美化**:
可以根据需要为 `.marker` 类添加样式,调整图标、图标大小等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)