/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-17 14:41:57
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @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, CustomOverlay } from 'react-bmapgl';
|
import { Form, Input, Button, Message, Popconfirm } from '@arco-design/web-react';
|
|
import { Row, Col } from 'antd';
|
const FormItem = Form.Item;
|
|
const formItemLayout = {
|
labelCol: {
|
span: 4,
|
},
|
wrapperCol: {
|
span: 17,
|
},
|
};
|
|
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.current) {
|
let geolocation = new BMapGL.Geolocation();
|
geolocation.getCurrentPosition((r) => {
|
if (geolocation.getStatus() === 0) {
|
handleAnalysis(r.point);
|
} else {
|
Message.warning(`Failed with status ${geolocation.getStatus()}`);
|
}
|
}, '广州市');
|
}
|
}, [mapRef]);
|
|
//查询
|
const handleSubmit = () => {
|
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); // 添加地点名称
|
} else {
|
Message.warning('您输入的地址没有解析到结果！');
|
}
|
}, '广州市');
|
}
|
});
|
}
|
};
|
|
// 解析地址为中文
|
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()
|
}
|
|
//使用地址
|
const handleUseAddress = (e) => {
|
e.stopPropagation()
|
console.log(addressData);
|
}
|
|
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: '522px' }} />
|
</FormItem>
|
<Button style={{ marginRight: '20px' }}>
|
重置
|
</Button>
|
<Button
|
type="primary"
|
onClick={handleSubmit}
|
>
|
查询
|
</Button>
|
</Form>
|
<Map
|
ref={mapRef}
|
zoom="15"
|
enableScrollWheelZoom
|
onClick={(e) => {
|
let pt = e.latlng;
|
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: '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>
|
</div>
|
)
|
}
|
