~liuwh/gzDyh.git

			@@ -2,13 +2,14 @@
			* @Author: dminyi 1301963064@qq.com
			* @Date: 2024-08-17 14:41:57
			* @LastEditors: dminyi 1301963064@qq.com
			* @LastEditTime: 2024-08-23 15:17:06
			* @LastEditTime: 2024-08-27 10:17:49
			* @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
			* @Description: 地图
			*/
			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 { Map, Marker, NavigationControl, InfoWindow, CustomOverlay } from 'react-bmapgl';
			import { Form, Input, Button, Message, Popconfirm } from '@arco-design/web-react';

			import { Row, Col } from 'antd';
			const FormItem = Form.Item;

			@@ -21,60 +22,87 @@
			},
			};

			const BMapGL = window.BMapGL

			// 自定义Marker的icon
			let myIcon = new BMapGL.Icon(require("@/assets/images/icon/frame.png"), new BMapGL.Size(24, 24), {
			// 是否允许缩放图标
			enableScaling: true
			});

			export default function MapView(props) {
			const mapRef = useRef()
			const formRef = useRef()
			const [addressList, setAddressList] = useState([])
			const [addressData, setAddressData] = useState({})
			const [selectData, setSelectData] = useState({})

			useEffect(() => {
			if (mapRef) {
			let geolocation = new window.BMapGL.Geolocation();
			geolocation.getCurrentPosition(function (r) {
			if (this.getStatus() === 0) {
			handleAnalysis(r.point)
			//初次进入定位在当前浏览器
			if (mapRef.current) {
			let geolocation = new BMapGL.Geolocation();
			geolocation.getCurrentPosition((r) => {
			if (geolocation.getStatus() === 0) {
			handleAnalysis(r.point);
			} else {
			Message.warning('failed' + this.getStatus());
			Message.warning(`Failed with status ${geolocation.getStatus()}`);
			}
			});
			}, '广州市');
			}
			}, [mapRef])
			}, [mapRef]);

			//查询
			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) {
			var myGeo = new BMapGL.Geocoder();
			myGeo.getPoint(values.name, (point) => {
			if (point) {
			mapRef.current.map.centerAndZoom(point, 15);
			mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }))
			handleAnalysis(point, values.name); // 添加地点名称
			handleAnalysis(point); // 添加地点名称
			} else {
			Message.warning('您输入的地址没有解析到结果！');
			}
			}, '广州市')
			}, '广州市');
			}
			})
			});
			}
			}
			};

			//解析地址为中文
			const handleAnalysis = (pt,name) => {
			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
			if (name) {
			addName += ` ${name}`; // 添加地点名称
			}
			mapRef.current.map.centerAndZoom(pt, 15);
			mapRef.current.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName }))
			setAddressList([addName])
			// 解析地址为中文
			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);//地图指向中心
			mapRef.current?.map.clearOverlays();//清除所有标点
			mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点
			setAddressList(surroundingPois);
			setAddressData({
			pt,
			addName
			})
			});
			};

			//点击附近地址
			const clickVicinity = (data) => {
			const address = data.address + data.title
			setSelectData({
			uid: data.uid,
			address
			})
			formRef.current.setFieldValue('name', address)
			handleSubmit()
			}

			console.log(addressList,'addressList')
			//使用地址
			const handleUseAddress = (e) => {
			e.stopPropagation()
			console.log(addressData);
			}

			return (
			<div>
			@@ -108,17 +136,34 @@
			enableScrollWheelZoom
			onClick={(e) => {
			let pt = e.latlng;
			handleAnalysis(pt,null)
			handleAnalysis(pt);
			}}
			>
			<CustomOverlay
			position={addressData.pt \|\| new BMapGL.Point(113.26552377996691, 23.143506946336696)}
			offset={{ width: -91, height: -25 }}
			>
			<div className='mapPopconfirm'>
			<div>{addressData.addName}</div>
			<div className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</div>
			</div>
			</CustomOverlay>
			</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 style={{ color: '#86909C', marginTop: '43px' }} >附近地址</div>
			<div style={{ height: '343px', overflowY: 'scroll' }}>
			{addressList?.map(item => (
			<div
			key={item.uid}
			className='mapVicinity'
			onClick={() => { clickVicinity(item) }}
			style={{ color: selectData.uid === item.uid ? '#1A6FB8' : '' }}
			>
			{item.address}    {item.title}
			<div className='mapVicinityIcon'></div>
			</div>
			))}
			</div>
			</Col>
			</Row>