vue3项目中使用高德地图实现添加点标记

1. 引入高德地图API

在vue3项目中，可以通过在index.html中引入高德地图API的方式来使用高德地图。在head标签中添加以下代码：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key"></script>

其中，key为你在高德开放平台申请的地图应用的key。

2. 在组件中添加地图容器

在组件模板中添加一个div作为地图容器：

<template>
  <div id="map"></div>
</template>

3. 初始化地图

在组件中添加一个mounted生命周期钩子，在其中初始化地图：

mounted() {
  const map = new AMap.Map("map", {
    zoom: 13, //地图级别
    center: [116.397428, 39.90923], //中心点坐标
  });
}

其中，zoom为地图级别，center为地图中心点的经纬度坐标。

4. 添加点标记

在地图上添加点标记，可以通过AMap.Marker类来实现。在mounted生命周期钩子中添加以下代码：

const marker = new AMap.Marker({
  position: [116.397428, 39.90923], //点标记位置
  title: "这是一个点标记", //鼠标悬停时的提示信息
});
marker.setMap(map); //将点标记添加到地图中

其中，position为点标记的经纬度坐标，title为鼠标悬停时显示的提示信息。

完整代码如下：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    const map = new AMap.Map("map", {
      zoom: 13,
      center: [116.397428, 39.90923],
    });
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      title: "这是一个点标记",
    });
    marker.setMap(map);
  },
};
</script>

运行项目后即可在地图上看到一个点标记。