From 166b432dd40c998e6e9a039a5b4948b8a5290ff0 Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Fri, 23 Aug 2024 17:52:08 +0800
Subject: [PATCH] 地图

---
 gz-customerSystem/src/views/register/visit/component/map.jsx |   84 +++++++++++++++++++++++++++++-------------
 1 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index 35ceaa0..54fbabc 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -2,7 +2,7 @@
  * @Author: dminyi 1301963064@qq.com
  * @Date: 2024-08-17 14:41:57
  * @LastEditors: dminyi 1301963064@qq.com
- * @LastEditTime: 2024-08-23 15:17:06
+ * @LastEditTime: 2024-08-23 17:06:13
  * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
  * @Description: 地图
  */
@@ -26,55 +26,87 @@
   const formRef = useRef()
   const [addressList, setAddressList] = useState([])
 
+
   useEffect(() => {
-    if (mapRef) {
+    if (mapRef.current) {
       let geolocation = new window.BMapGL.Geolocation();
-      geolocation.getCurrentPosition(function (r) {
-        if (this.getStatus() === 0) {
-          handleAnalysis(r.point)
+      geolocation.getCurrentPosition((r) => {
+        if (geolocation.getStatus() === 0) {
+          handleAnalysis(r.point);
         } else {
-          Message.warning('failed' + this.getStatus());
+          Message.warning(`Failed with status ${geolocation.getStatus()}`);
         }
       });
     }
-  }, [mapRef])
+  }, [mapRef]);
 
   const handleSubmit = () => {
     if (formRef.current) {
       formRef.current.validate(undefined, (errors, values) => {
         if (!errors) {
           var myGeo = new window.BMapGL.Geocoder();
-          // 将地址解析结果显示在地图上，并调整地图视野
-          myGeo.getPoint(values.name, function (point) {
+
+          myGeo.getPoint(values.name, (point) => {
             if (point) {
               mapRef.current.map.centerAndZoom(point, 15);
-              mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }))
+              mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }));
               handleAnalysis(point, values.name); // 添加地点名称
+              // searchNearbyPOIs(point);
             } else {
               Message.warning('您输入的地址没有解析到结果！');
             }
-          }, '广州市')
+          }, '广州市');
         }
-      })
+      });
     }
-  }
+  };
 
-  //解析地址为中文
-  const handleAnalysis = (pt,name) => {
+  // 解析地址为中文
+  const handleAnalysis = (pt, name) => {
     let geoc = new window.BMapGL.Geocoder();
-    geoc.getLocation(pt, function (rs) {
+    geoc.getLocation(pt, (rs) => {
+      console.log(rs, 'rsss')
       let addComp = rs.addressComponents;
-      let addName = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
+      let addName = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
+      let surroundingPois = rs.surroundingPois;
       if (name) {
         addName += ` ${name}`; // 添加地点名称
       }
       mapRef.current.map.centerAndZoom(pt, 15);
-      mapRef.current.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName }))
-      setAddressList([addName])
-    })
-  }
+      mapRef.current.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName }));
+      setAddressList(surroundingPois);
+    });
+  };
 
-  console.log(addressList,'addressList')
+  // 搜索附近的POI
+  const searchNearbyPOIs = (centerPoint) => {
+    const radius = 10; // 半径10米
+    const circle = new window.BMapGL.Circle(centerPoint, {
+      strokeColor: "#FF0000",
+      strokeOpacity: 0.9,
+      strokeWeight: 2,
+      fillColor: "#FF0000",
+      fillOpacity: 0.1,
+      radius: radius
+    });
+
+    mapRef.current.map.addOverlay(circle);
+
+    const poiSearch = new window.BMapGL.PoiSearch(mapRef.current.map, {
+      searchComplete: function (results) {
+        if (results.status === window.BMapGL.RESULT_SUCCESS) {
+          const pois = results.pois.map(poi => poi.name);
+          setAddressList([...addressList, ...pois]);
+        }
+      }
+    });
+
+    poiSearch.searchInCircle('', circle);
+  };
+
+
+
+  console.log(addressList, 'addressList')
 
   return (
     <div>
@@ -108,7 +140,7 @@
             enableScrollWheelZoom
             onClick={(e) => {
               let pt = e.latlng;
-              handleAnalysis(pt,null)
+              handleAnalysis(pt, null);
             }}
           >
           </Map>
@@ -116,9 +148,9 @@
         <Col span={8}>
           <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div>
           <div style={{ height: 'calc(100% - 64px)', overflowY: 'scroll' }}>
-            {addressList.map(item => {
-              return <div key={item}>{item}</div>
-            })}
+            {addressList?.map((item, index) => (
+              <div key={index}>{item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}</div>
+            ))}
           </div>
         </Col>
       </Row>

--
Gitblit v1.8.0