vue3 运用高德地图 自定义弹框 为信息窗体 添加 new AMaps.value.InfoWindow 添加事件

在Vue 3中使用高德地图并自定义弹窗作为信息窗口，你可以通过以下步骤实现：

1. 安装并导入高德地图JavaScript API。
2. 创建高德地图实例并初始化地图。
3. 创建InfoWindow对象，并在需要时打开。

以下是一个简单的示例代码：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
 
const map = ref(null);
const infoWindow = ref(null);
 
onMounted(() => {
  map.value = new AMap.Map('map', {
    zoom: 11,
    center: [116.397428, 39.90923] // 设置中心点坐标
  });
 
  // 创建自定义弹窗内容
  const content = document.createElement('div');
  content.innerHTML = '<p>这里是弹窗内容</p>';
 
  // 创建InfoWindow，传入配置
  infoWindow.value = new AMap.InfoWindow({
    content: content, // 自定义内容
    offset: new AMap.Pixel(16, -30) // 偏移量
  });
 
  // 打开弹窗
  infoWindow.value.open(map.value, map.value.getCenter());
});
</script>
 
<style>
/* 在这里添加样式 */
</style>

确保你已经在项目中导入了高德地图的JavaScript API，并且有效的key。上述代码中，我们在组件挂载后初始化了高德地图，并创建了一个InfoWindow对象，在地图的中心打开了这个自定义弹窗。