zksy-website-front/src/components/about/ContactUs.tsx

'use client'
import React, {useEffect} from 'react';
import SubTitle from "@/components/subTitle";
import {BDMapGL} from "@/utils/BDMap";
import Image from "next/image";

function ContactUs({basicInfo, locationInfoList}: { basicInfo: BasicInfo, locationInfoList: LocationInfo[] }) {
  const BASE_URL: string = process.env.NEXT_PUBLIC_BASE_URL as string;

  const BDMapInit = () => {
    BDMapGL('94KOPB1NRjoXmLvlJN6HMi7eVC50z09K').then((BMapGL: any) => {
      const map = new BMapGL.Map('container')
      locationInfoList.forEach(point => {
        const bmapPoint = new BMapGL.Point(point.longitude, point.latitude);
        const marker = new BMapGL.Marker(bmapPoint);

        // 创建信息窗口（内容可自定义 HTML）
        const infoWindow = new BMapGL.InfoWindow(`
            <div>
              <h4>姓名：${point.name}</h4>
              <p style="margin: 5px 0 0; color: #666;">区域：${point.marker}</p>
              <p style="margin: 5px 0 10px; color: #666;">联系方式：${point.phone}</p>
            </div>
          `);

        // 绑定点击事件：点击标记点显示信息窗口
        marker.addEventListener("click", () => {
          map.openInfoWindow(infoWindow, bmapPoint); // 在点位坐标处打开窗口
        });

        map.centerAndZoom(bmapPoint, 7)
        map.enableScrollWheelZoom(true) //设置鼠标放大缩小
        map.addControl(new BMapGL.ScaleControl()) //卡尺
        map.addOverlay(marker)
      });

    })
  }
  const qrCodeUrl = BASE_URL + basicInfo.qrCodeUrl
  useEffect(() => {
    BDMapInit()
  }, []);
  return (
    <>
      {/* 联系我们 */}
      <section id="section-4" className="scroll-mt-10 py-12 px-4">
        <div className="w-4/5 mx-auto my-10 sm:my-6">
          <SubTitle title="联系我们"/>
        </div>
        <div className="w-full sm:w-[80%] mx-auto">
          <Image
            src="/assets/about/25.jpg"
            alt="contact"
            width={1000}
            height={1000}
            className="w-full h-auto block sm:hidden"
            unoptimized
          />
          <Image
            src="/assets/about/24.jpg"
            alt="contact"
            width={1000}
            height={1000}
            className="w-full h-auto hidden sm:block"
            unoptimized
          />
        </div>
        {/* <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
          <div className="h-88" id="container"></div>
          <div className="space-y-4">
            <div className="bg-gray-300 w-60 h-60">
              <Image src={qrCodeUrl} alt={'qrcode'} width={500} height={500}/>
            </div>
            <p>电话：{basicInfo.telephone}</p>
            <p>邮箱：{basicInfo.email}</p>
            <p>地址：{basicInfo.address}</p>
          </div>
        </div> */}
      </section>
    </>
  );
}

export default ContactUs;