From e978022eaa03c076b18c851a7c0852402e80fd1c Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Fri, 06 Sep 2024 16:38:42 +0800
Subject: [PATCH] feat: 识别文字
---
gz-customerSystem/src/views/register/visit/component/map.jsx | 166 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 102 insertions(+), 64 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index 54fbabc..f7ee283 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -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 17:06:13
+ * @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, CustomOverlay } from 'react-bmapgl';
+import { Form, Input, Button, Message, Spin } from '@arco-design/web-react';
+
import { Row, Col } from 'antd';
const FormItem = Form.Item;
@@ -21,37 +22,47 @@
},
};
+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({})
+ const [loading, setLoading] = useState(false)
useEffect(() => {
+ //初次进入定位在当前浏览器
if (mapRef.current) {
- let geolocation = new window.BMapGL.Geolocation();
+ setLoading(true)
+ let geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition((r) => {
if (geolocation.getStatus() === 0) {
handleAnalysis(r.point);
} 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 window.BMapGL.Geocoder();
-
+ 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); // 添加地点名称
- // searchNearbyPOIs(point);
+ handleAnalysis(point, addItem); // 添加地点名称
} else {
Message.warning('您输入的地址没有解析到结果！');
}
@@ -62,55 +73,62 @@
};
// 解析地址为中文
- const handleAnalysis = (pt, name) => {
- let geoc = new window.BMapGL.Geocoder();
- geoc.getLocation(pt, (rs) => {
- console.log(rs, 'rsss')
- let addComp = rs.addressComponents;
- let addName = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
- let surroundingPois = rs.surroundingPois;
- if (name) {
- addName += ` ${name}`; // 添加地点名称
- }
- mapRef.current.map.centerAndZoom(pt, 15);
- mapRef.current.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName }));
- setAddressList(surroundingPois);
- });
+ 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(addItem.point, { icon: myIcon }));//添加标点
+ setAddressData({
+ pt: addItem.point,
+ addName: addItem.address + addItem.title
+ })
+ }
+
};
- // 搜索附近的POI
- const searchNearbyPOIs = (centerPoint) => {
- const radius = 10; // 半径10米
- const circle = new window.BMapGL.Circle(centerPoint, {
- strokeColor: "#FF0000",
- strokeOpacity: 0.9,
- strokeWeight: 2,
- fillColor: "#FF0000",
- fillOpacity: 0.1,
- radius: radius
- });
+ //点击附近地址
+ const clickVicinity = (data) => {
+ const address = data.address + data.title
+ setSelectData({
+ uid: data.uid,
+ address
+ })
+ formRef.current.setFieldValue('name', address)
+ handleSubmit(data)
+ }
- mapRef.current.map.addOverlay(circle);
-
- const poiSearch = new window.BMapGL.PoiSearch(mapRef.current.map, {
- searchComplete: function (results) {
- if (results.status === window.BMapGL.RESULT_SUCCESS) {
- const pois = results.pois.map(poi => poi.name);
- setAddressList([...addressList, ...pois]);
- }
- }
- });
-
- poiSearch.searchInCircle('', circle);
- };
-
-
-
- console.log(addressList, 'addressList')
+ //使用地址
+ const handleUseAddress = (e) => {
+ e.stopPropagation()
+ 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}
@@ -129,7 +147,7 @@
</Button>
<Button
type="primary"
- onClick={handleSubmit}
+ onClick={() => { handleSubmit(false) }}
>
查询
</Button>
@@ -140,20 +158,40 @@
enableScrollWheelZoom
onClick={(e) => {
let pt = e.latlng;
- handleAnalysis(pt, null);
+ handleAnalysis(pt);
}}
+ center={new BMapGL.Point(113.27142900886543, 23.13533647285972)}
>
+ {addressData.pt && <CustomOverlay
+ position={addressData.pt}
+ offset={{ width: -91, height: -25 }}
+ >
+ <div className='mapPopconfirm'>
+ <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>}
</Map>
</Col>
<Col span={8}>
- <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div>
- <div style={{ height: 'calc(100% - 64px)', overflowY: 'scroll' }}>
- {addressList?.map((item, index) => (
- <div key={index}>{item.address} {item.title}</div>
+ <div style={{ color: '#86909C', marginTop: '43px' }} >附近地址</div>
+ <div style={{ height: '343px', overflowY: 'scroll', paddingRight: '10px' }}>
+ {addressList?.map(item => (
+ <div
+ key={item.uid}
+ className='mapVicinity'
+ onClick={() => { clickVicinity(item) }}
+ style={{ color: selectData.uid === item.uid ? '#1A6FB8' : '' }}
+ >
+ <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
--
Gitblit v1.8.0