~liuwh/gzDyh.git

			@@ -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)
			}

			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>
			)
			}