vue3 使用高德地图标点
时间: 2024-05-30 20:07:16 浏览: 13
Vue3 是一个流行的 JavaScript 框架,用于构建现代 Web 应用程序。高德地图提供了 JavaScript API,您可以在 Vue3 中使用该 API 来实现地图标点功能。下面是使用高德地图标点的步骤:
1. 在 index.html 中引入高德地图 JavaScript API:
```
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
```
2. 在 Vue3 组件中创建地图实例,并在 mounted 生命周期钩子中初始化地图:
```
<template>
<div id="map-container"></div>
</template>
<script>
export default {
mounted() {
// 创建地图实例
const map = new AMap.Map('map-container', {
center: [116.397428, 39.90923], // 地图中心点
zoom: 13 // 缩放级别
});
}
}
</script>
```
3. 在组件中创建标记点,并添加到地图上:
```
<template>
<div id="map-container"></div>
</template>
<script>
export default {
mounted() {
// 创建地图实例
const map = new AMap.Map('map-container', {
center: [116.397428, 39.90923], // 地图中心点
zoom: 13 // 缩放级别
});
// 创建标记点
const marker = new AMap.Marker({
position: [116.397428, 39.90923], // 标记点位置
title: '这里是标记点', // 标记点标题
map // 所属地图实例
});
// 添加标记点到地图上
map.add(marker);
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)