如何定义高德地图的弹窗？

当你使用高德地图的 InfoWindow 组件时，弹窗的结构可能从简单的文本到复杂的 HTML 内容都有。虽然官方的示例非常简单，但实际需求中，弹窗的内容往往更复杂，尤其是在处理动态数据和复杂布局时。

官方示例

官方文档中，创建一个简单的 InfoWindow 弹窗可能如下所示：

var infoWindow = new AMap.InfoWindow({
    anchor: 'top-left',
    content: '这是信息窗体！这是信息窗体！',
});

对于简单的 HTML 内容，你可以直接将其作为字符串传递：

const str = `<div>这是信息窗体！这是信息窗体！</div>`;
var infoWindow = new AMap.InfoWindow({
    anchor: 'top-left',
    content: str,
});

但是，当弹窗内容变得复杂时，比如需要嵌套循环或动态生成大量内容，直接操作 HTML 字符串会变得难以维护。

解决方案：使用 Vue 组件

为了提高代码的可维护性和可读性，你可以将弹窗的内容封装为 Vue 组件，并使用 Vue 的渲染机制来生成最终的 HTML。

1. 定义 Vue 组件

首先，创建一个 Vue 组件 PopupComponent.vue 或 PopupComponent.jsx，以便管理复杂的弹窗内容和样式。

PopupComponent.jsx

import { defineComponent } from 'vue';

// 定义组件
export default defineComponent({
    name: 'PopupComponent',
    props: {
        mapPopBg: String,
        mapData: Array
    },
    render() {
        return (
            <div
                class="flex flex-col py-4 text-[.8125rem] justify-between w-[15rem] h-72 p-2 pl-2 rounded-lg text-sm map-item text-[#7BABD7]"
                style={{
                    backgroundImage: `url(${this.mapPopBg})`,
                    backgroundSize: '100% 100%',
                    backgroundRepeat: 'no-repeat'
                }}
            >
                {this.mapData.map((item, index) => (
                    <div key={index} class="flex items-center">
                        <span class="bg-[#7BABD7] w-1 h-1 rounded-md inline-block mx-2"></span>
                        {item.title}
                        <span class={`ml-6 ${index > 5 ? 'text-[#F5A603]' : 'text-[#D8EDFF]'}`}>
                            {item.value}{item.unit}
                        </span>
                    </div>
                ))}
            </div>
        );
    }
});

2. 生成弹窗 HTML

使用 Vue 的渲染机制生成最终的 HTML。创建一个工具函数 generatePopupHtml，将 Vue 组件的渲染结果转换为 HTML 字符串。

EnergyMap.js

import { createApp, h } from "vue";
import PopupComponent from "./PopupComponent.jsx";

// 生成弹窗 HTML 的函数
export const generatePopupHtml = (options) => {
  const app = createApp({
    render() {
      return h(PopupComponent, { ...options });
    },
  });
  const container = document.createElement("div");
  app.mount(container);
  return container.innerHTML;
};

3. 在高德地图中使用

在你的 Vue 组件中调用 generatePopupHtml 方法，并将生成的 HTML 用于高德地图的 InfoWindow。

GDMap.vue

import { generatePopupHtml } from './EnergyMap.js';

const mapPopBg = 'path/to/background/image.jpg';
const mapData = [
  { title: 'Item 1', value: '10', unit: 'units' },
  { title: 'Item 2', value: '20', unit: 'units' },
  // 其他数据项
];

const popupHtml = generatePopupHtml({ mapPopBg, mapData });

var infoWindow = new AMap.InfoWindow({
  isCustom: true,
  position: [lng, lat], // 经纬度
  content: popupHtml,
  offset: [30, 10],
});

总结

虽然这个方法增加了一些代码量，但它大大提高了代码的可维护性和可读性。通过使用 Vue 组件和渲染机制，你可以轻松管理复杂的弹窗内容，并保持代码的整洁和可扩展性。这种方式不仅使你的代码更易于维护，还能够更好地处理复杂的动态内容。当然如果你有更棒的创意，欢迎在评论区分享你的想法！