From c4c49d5b721db3e96342e48296144200eb61dd9e Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Wed, 28 Aug 2024 14:05:47 +0800
Subject: [PATCH] feat: 纠纷发生地（地图）功能完成
---
gz-customerSystem/src/views/register/visit/component/map.jsx | 85 +++++++++++++++++++++++++++---------------
gz-customerSystem/src/views/register/index.less | 13 ++++--
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 7 +++
3 files changed, 69 insertions(+), 36 deletions(-)
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 8f35c0e..3650dfa 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/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;
}
}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index fd7dcfc..5542f87 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/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,21 +73,32 @@
};
// 解析地址为中文
- const handleAnalysis = (pt) => {
- let geoc = new BMapGL.Geocoder();
- geoc.getLocation(pt, (rs) => {
- let addComp = rs.content;
- let addName = `${addComp.address} ${addComp.poi_desc}`;
- let surroundingPois = rs.surroundingPois;
- mapRef.current?.map.centerAndZoom(pt, 15);//地图指向中心
+ const handleAnalysis = (pt, addItem) => {
+ if (!addItem) {
+ let geoc = new BMapGL.Geocoder();
+ geoc.getLocation(pt, (rs) => {
+ let addComp = rs.content;
+ let addName = `${addComp.address} ${addComp.poi_desc}`;
+ let surroundingPois = rs.surroundingPois;
+ mapRef.current?.map.centerAndZoom(pt, 15);//地图指向中心
+ mapRef.current?.map.clearOverlays();//清除所有标点
+ mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点
+ setAddressList(surroundingPois);
+ setAddressData({
+ pt,
+ addName
+ })
+ });
+ } else {
+ mapRef.current?.map.centerAndZoom(addItem.point, 15);//地图指向中心
mapRef.current?.map.clearOverlays();//清除所有标点
- mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点
- setAddressList(surroundingPois);
+ mapRef.current?.map.addOverlay(new BMapGL.Marker(addItem.point, { icon: myIcon }));//添加标点
setAddressData({
- pt,
- addName
+ 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 className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</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>
</div>
- </CustomOverlay>
+ </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} {item.title}
- <div className='mapVicinityIcon'></div>
+ <div style={{ marginRight: '5px', flex: 1 }}>{item.address} {item.title}</div>
+ {selectData.uid === item.uid ? <div className='mapVicinityIcon'></div> : <div style={{ width: '14px' }}></div>}
</div>
))}
</div>
</Col>
</Row>
- </div>
+ </Spin>
)
}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index 3dce4c6..73224d7 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/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='事项概况指南'
--
Gitblit v1.8.0