vue3如何在高德地图上打点
时间: 2023-12-13 11:02:38 浏览: 32
要在 Vue3 中使用高德地图并在地图上打点,可以先安装 `vue-amap` 插件。
```
npm install vue-amap --save
```
然后在 `main.js` 中引入和配置插件。
```javascript
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'YOUR_AMAP_API_KEY',
plugin: ['AMap.MarkerClusterer'],
v: '1.4.15',
});
```
在组件中使用 `amap` 标签引入地图,并在 `mounted` 钩子中添加标记并设置其位置。
```vue
<template>
<div class="map-container">
<amap :zoom="zoom" :center="center"></amap>
</div>
</template>
<script>
export default {
data() {
return {
zoom: 10,
center: [116.39, 39.9],
};
},
mounted() {
const marker = new AMap.Marker({
position: this.center,
});
this.$amap.add(marker);
},
};
</script>
```
这里的 `center` 变量表示地图的中心点位置,可以根据需要设置。 `Marker` 是标记的构造函数,可以根据需要设置标记的其他属性,例如图标、文本等。
注意:需要在高德地图开放平台申请 API Key 并在代码中替换 `YOUR_AMAP_API_KEY`。