地图

dminyi

2024-08-23 166b432dd40c998e6e9a039a5b4948b8a5290ff0

 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>