feat：地图弹窗

zhangyongtian

2024-08-22 27b935c319f75ee68dde68e7f666b4c3befd0ba0

 gz-customerSystem/src/views/register/visit/component/map.jsx

@@ -6,7 +6,7 @@
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
 * @Description: 地图
 */
import React, { useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl';
import { Form, Input, Button, Message } from '@arco-design/web-react';
import { Row, Col } from 'antd';
@@ -24,6 +24,20 @@
export default function MapView(props) {
  const mapRef = useRef()
  const formRef = useRef()
  const [addressList, setAddressList] = useState([])

  useEffect(() => {
    if (mapRef) {
      let geolocation = new window.BMapGL.Geolocation();
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() === 0) {
          handleAnalysis(r.point)
        } else {
          Message.warning('failed' + this.getStatus());
        }
      });
    }
  }, [mapRef])

  const handleSubmit = () => {
    if (formRef.current) {
@@ -33,7 +47,7 @@
          // 将地址解析结果显示在地图上，并调整地图视野
          myGeo.getPoint(values.name, function (point) {
            if (point) {
              mapRef.current.map.centerAndZoom(point, 16);
              mapRef.current.map.centerAndZoom(point, 15);
              mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }))
            } else {
              Message.warning('您输入的地址没有解析到结果！');
@@ -42,6 +56,18 @@
        }
      })
    }
  }

  //解析地址为中文
  const handleAnalysis = (pt) => {
    let geoc = new window.BMapGL.Geocoder();
    geoc.getLocation(pt, function (rs) {
      let addComp = rs.addressComponents;
      let addName = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
      mapRef.current.map.centerAndZoom(pt, 15);
      mapRef.current.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName }))
      setAddressList([addName])
    })
  }

  return (
@@ -72,25 +98,22 @@
          </Form>
          <Map
            ref={mapRef}
            center={{ lng: 116.402544, lat: 39.928216 }}
            zoom="11"
            zoom="15"
            enableScrollWheelZoom
            onClick={(e) => {
              let pt = e.latlng;
              let geoc = new window.BMapGL.Geocoder();
              geoc.getLocation(pt, function (rs) {
                let addComp = rs.addressComponents;
                console.log(addComp);
                // console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
              })
              handleAnalysis(pt)
            }}
          >
            <Marker position={{ lng: 113.27, lat: 23.12 }} />
            <InfoWindow position={{ lng: 113.27, lat: 23.12 }} text="广州市" />
          </Map>
        </Col>
        <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>
            })}
          </div>
        </Col>
      </Row>
    </div>