feat: 纠纷发生地（地图）功能完成

zhangyongtian

2024-08-28 c4c49d5b721db3e96342e48296144200eb61dd9e

feat: 纠纷发生地（地图）功能完成

 gz-customerSystem/src/views/register/index.less

@@ -200,7 +200,7 @@

.mapPopconfirm {
    width: 300px;
    height: 90px;
    min-height: 90px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
@@ -225,21 +225,24 @@
        padding: 3px 10px;
        width: 80px;
        text-align: center;
        position: absolute;
        right: 15px;
        bottom: 15px;
    }
}

.mapVicinity {
    margin-bottom: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;

    &:hover {
        color: #1A6FB8;
    }

    .mapVicinityIcon {
		
        background: url('../../assets/images/icon/selectIcon.png') no-repeat center center;
        width: 14px;
        height: 14px;
        background-size: contain;
        border: 1px dashed #1A6FB8;
    }
}

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

@@ -7,8 +7,8 @@
 * @Description: 地图
 */
import React, { useEffect, useRef, useState } from 'react';
import { Map, Marker, NavigationControl, InfoWindow, CustomOverlay } from 'react-bmapgl';
import { Form, Input, Button, Message, Popconfirm } from '@arco-design/web-react';
import { Map, CustomOverlay } from 'react-bmapgl';
import { Form, Input, Button, Message, Spin } from '@arco-design/web-react';

import { Row, Col } from 'antd';
const FormItem = Form.Item;
@@ -36,10 +36,12 @@
  const [addressList, setAddressList] = useState([])
  const [addressData, setAddressData] = useState({})
  const [selectData, setSelectData] = useState({})
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    //初次进入定位在当前浏览器
    if (mapRef.current) {
      setLoading(true)
      let geolocation = new BMapGL.Geolocation();
      geolocation.getCurrentPosition((r) => {
        if (geolocation.getStatus() === 0) {
@@ -47,19 +49,20 @@
        } else {
          Message.warning(`Failed with status ${geolocation.getStatus()}`);
        }
        setLoading(false)
      }, '广州市');
    }
  }, [mapRef]);

  //查询
  const handleSubmit = () => {
  const handleSubmit = (addItem) => {
    if (formRef.current) {
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          var myGeo = new BMapGL.Geocoder();
          myGeo.getPoint(values.name, (point) => {
            if (point) {
              handleAnalysis(point); // 添加地点名称
              handleAnalysis(point, addItem); // 添加地点名称
            } else {
              Message.warning('您输入的地址没有解析到结果！');
            }
@@ -70,7 +73,8 @@
  };

  // 解析地址为中文
  const handleAnalysis = (pt) => {
  const handleAnalysis = (pt, addItem) => {
    if (!addItem) {
    let geoc = new BMapGL.Geocoder();
    geoc.getLocation(pt, (rs) => {
      let addComp = rs.content;
@@ -85,6 +89,16 @@
        addName
      })
    });
    } else {
      mapRef.current?.map.centerAndZoom(addItem.point, 15);//地图指向中心
      mapRef.current?.map.clearOverlays();//清除所有标点
      mapRef.current?.map.addOverlay(new BMapGL.Marker(addItem.point, { icon: myIcon }));//添加标点
      setAddressData({
        pt: addItem.point,
        addName: addItem.address + addItem.title
      })
    }

  };

  //点击附近地址
@@ -95,18 +109,26 @@
      address
    })
    formRef.current.setFieldValue('name', address)
    handleSubmit()
    handleSubmit(data)
  }

  //使用地址
  const handleUseAddress = (e) => {
    e.stopPropagation()
    console.log(addressData);
    props.selectAdd(addressData.addName)
  }

  return (
    <div>
      <Row gutter={[16, 0]}>
    <Spin tip='正在获取附近地址...' loading={loading} style={{ width: '100%', height: '100%' }}>
      <Row
        gutter={[16, 0]}
        onKeyDown={(event) => {
          if (event.key === 'Enter') {
            event.preventDefault();
            handleSubmit(false)
          }
        }}
      >
        <Col span={16}>
          <Form
            ref={formRef}
@@ -125,7 +147,7 @@
            </Button>
            <Button
              type="primary"
              onClick={handleSubmit}
              onClick={() => { handleSubmit(false) }}
            >
              查询
            </Button>
@@ -138,21 +160,24 @@
              let pt = e.latlng;
              handleAnalysis(pt);
            }}
            center={new BMapGL.Point(113.27142900886543, 23.13533647285972)}
          >
            <CustomOverlay
              position={addressData.pt || new BMapGL.Point(113.26552377996691, 23.143506946336696)}
            {addressData.pt && <CustomOverlay
              position={addressData.pt}
              offset={{ width: -91, height: -25 }}
            >
              <div className='mapPopconfirm'>
                <div>{addressData.addName}</div>
                <div style={{marginBottom: '10px'}}>{addressData.addName}</div>
                <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
                <div className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</div>
              </div>
            </CustomOverlay>
              </div>
            </CustomOverlay>}
          </Map>
        </Col>
        <Col span={8}>
          <div style={{ color: '#86909C', marginTop: '43px' }} >附近地址</div>
          <div style={{ height: '343px', overflowY: 'scroll' }}>
          <div style={{ height: '343px', overflowY: 'scroll', paddingRight: '10px' }}>
            {addressList?.map(item => (
              <div
                key={item.uid}
@@ -160,13 +185,13 @@
                onClick={() => { clickVicinity(item) }}
                style={{ color: selectData.uid === item.uid ? '#1A6FB8' : '' }}
              >
                {item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}
                <div className='mapVicinityIcon'></div>
                <div style={{ marginRight: '5px', flex: 1 }}>{item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}</div>
                {selectData.uid === item.uid ? <div className='mapVicinityIcon'></div> : <div style={{ width: '14px' }}></div>}
              </div>
            ))}
          </div>
        </Col>
      </Row>
    </div>
    </Spin>
  )
}

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

@@ -798,7 +798,12 @@
        unmountOnExit={true}
        maskClosable={false}
      >
        <MapView />
        <MapView
          selectAdd={(value) => {
            props.formRef.current.setFieldValue('disputeAddress', value)
            setMapView(false)
          }}
        />
      </Modal>
      <MyDrawer
        title='事项概况指南'