From 0ee05af293847f16967b0fc6c5139aaf50c8be3a Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Thu, 22 Aug 2024 14:15:16 +0800
Subject: [PATCH] feat: 地图
---
gz-customerSystem/src/views/register/visit/component/map.jsx | 100 +++++++++++++++++++++++++++++----
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 49 ++++-----------
2 files changed, 102 insertions(+), 47 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index c03315a..7e2e441 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -6,17 +6,93 @@
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
* @Description: 地图
*/
-import React from 'react';
+import React, { useRef } from 'react';
import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl';
-export default function MapView() {
-
- return (
- <div>
- <Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11">
- <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
- <NavigationControl />
- <InfoWindow position={{ lng: 113.27, lat: 23.12 }} text="广州市" title="地标" />
- </Map>
- </div>
- )
+import { Form, Input, Button, Message } from '@arco-design/web-react';
+import { Row, Col } from 'antd';
+const FormItem = Form.Item;
+
+const formItemLayout = {
+ labelCol: {
+ span: 4,
+ },
+ wrapperCol: {
+ span: 17,
+ },
+};
+
+export default function MapView(props) {
+ const mapRef = useRef()
+ const formRef = useRef()
+
+ 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) {
+ if (point) {
+ mapRef.current.map.centerAndZoom(point, 16);
+ mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }))
+ } else {
+ Message.warning('您输入的地址没有解析到结果！');
+ }
+ }, '广州市')
+ }
+ })
+ }
+ }
+
+ return (
+ <div>
+ <Row gutter={[16, 0]}>
+ <Col span={16}>
+ <Form
+ ref={formRef}
+ layout='inline'
+ {...formItemLayout}
+ style={{ marginBottom: '8px' }}
+ >
+ <FormItem
+ label='查询位置：'
+ field='name'
+ >
+ <Input placeholder='请输入' style={{ width: '515px' }} />
+ </FormItem>
+ <Button style={{ marginRight: '20px' }}>
+ 重置
+ </Button>
+ <Button
+ type="primary"
+ onClick={handleSubmit}
+ >
+ 查询
+ </Button>
+ </Form>
+ <Map
+ ref={mapRef}
+ center={{ lng: 116.402544, lat: 39.928216 }}
+ zoom="11"
+ 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);
+ })
+ }}
+ >
+ <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>
+ </Col>
+ </Row>
+ </div>
+ )
}
\ 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 432d9bd..6c0faea 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -701,7 +701,7 @@
</Modal>
<Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered>
{/* <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> */}
- <div style={{marginTop:'-16px'}}>
+ <div style={{ marginTop: '-16px' }}>
<NewFileCheck />
</div>
{/* </div> */}
@@ -714,6 +714,8 @@
autoFocus={false}
focusLock={true}
footer={null}
+ unmountOnExit={true}
+ maskClosable={false}
>
<ApplyDialog
dialogType={dialogType}
@@ -747,43 +749,20 @@
autoFocus={false}
focusLock={true}
footer={null}
+ unmountOnExit={true}
+ maskClosable={false}
>
<DetailDialog />
</Modal>
- <Modal style={{ width: '1200px' }} visible={mapView} onCancel={() => setMapView(false)} footer={null} title='选择纠纷发生地' centered>
- <Row gutter={[16, 0]}>
- <Col span={16}>
- <Form
- ref={formRef}
- requiredSymbol={false}
- layout='inline'
- {...formItemLayout}
- style={{ marginBottom: '8px' }}
- >
- <FormItem
- label='查询位置：'
- field='name'
- onChange={(e) => console.log(e.target.value, 'vvv')}
- >
- <Input placeholder='请输入' style={{ width: '515px' }} />
- </FormItem>
- <Button style={{ marginRight: '20px' }}>
- 重置
- </Button>
- <Button
- type="primary"
- // onClick={handleSave}
- >
- 查询
- </Button>
- </Form>
- <MapView />
- </Col>
- <Col span={8}>
- <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div>
- </Col>
-
- </Row>
+ <Modal
+ style={{ width: '1200px' }}
+ visible={mapView}
+ onCancel={() => setMapView(false)}
+ footer={null}
+ title='选择纠纷发生地'
+ centered
+ >
+ <MapView />
</Modal>
</div>
)
--
Gitblit v1.8.0