Kaynağa Gözat

feat(utils): 新增 BDMapGL 函数以支持百度地图,并在 ContactUs 组件中使用

- 在 utils 目录下添加 BDMap.ts 文件,实现异步加载百度地图 API
- 创建 ContactUs 组件,用于展示联系我们页面- 在 ContactUs 组件中集成百度地图,显示公司位置
- 添加公司联系方式信息,包括电话、邮箱和地址
nahida 8 ay önce
ebeveyn
işleme
ac46cd7f2d

BIN
public/assets/about/10.png


BIN
public/assets/about/11.png


BIN
public/assets/about/12.png


BIN
public/assets/about/13.png


BIN
public/assets/about/14.png


BIN
public/assets/about/15.png


BIN
public/assets/about/16.png


BIN
public/assets/about/17.jpg


BIN
public/assets/about/18.png


BIN
public/assets/about/19.png


BIN
public/assets/about/2.png


BIN
public/assets/about/20.png


BIN
public/assets/about/21.png


BIN
public/assets/about/22.jpg


BIN
public/assets/about/3.png


BIN
public/assets/about/4.png


BIN
public/assets/about/5.png


BIN
public/assets/about/6.png


BIN
public/assets/about/7.png


BIN
public/assets/about/8.png


BIN
public/assets/about/9.png


+ 46 - 0
src/components/about/ContactUs.tsx

@@ -0,0 +1,46 @@
+'use client'
+import React, {useEffect} from 'react';
+import SubTitle from "@/components/subTitle";
+import {BDMapGL} from "@/utils/BDMap";
+import Image from "next/image";
+
+function ContactUs() {
+
+  const BDMapInit = () => {
+    BDMapGL('94KOPB1NRjoXmLvlJN6HMi7eVC50z09K').then((BMapGL: any) => {
+      const map = new BMapGL.Map('container')
+      const point = new BMapGL.Point(112.863450,28.178478)
+      map.centerAndZoom(point, 16)
+      map.enableScrollWheelZoom(true) //设置鼠标放大缩小
+      map.addControl(new BMapGL.ScaleControl()) //卡尺
+      const marker = new BMapGL.Marker(point) // 创建标注
+      map.addOverlay(marker)
+    })
+  }
+  useEffect(() => {
+    BDMapInit()
+  }, []);
+  return (
+    <>
+      {/* 联系我们 */}
+      <section id="section-4" className="w-4/5 mx-auto scroll-mt-10 py-12 px-4">
+        <div className="my-10 sm:my-6">
+          <SubTitle title="联系我们"/>
+        </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={'/assets/about/22.jpg'} alt={'qrcode'} width={500} height={500}/>
+            </div>
+            <p>电话:0731-85315153</p>
+            <p>邮箱:337843345@qq.com</p>
+            <p>地址:湖南省长沙市岳麓区梅溪湖街道泉水路461号长沙健康医疗大数据产业孵化基地1-2#楼 未来楼5楼左侧</p>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default ContactUs;

+ 13 - 0
src/utils/BDMap.ts

@@ -0,0 +1,13 @@
+export function BDMapGL(ak: string) {
+  return new Promise(function (resolve, reject) {
+    window.init = function () {
+      const map = window.BMapGL
+      resolve(map)
+    }
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.src = `http://api.map.baidu.com/api?v=1.0&&type=webgl&ak=${ak}&callback=init`
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+}