From d3eefcaf3762ca97483e1517697b6941bd9a58d8 Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Wed, 28 Aug 2024 09:51:50 +0800
Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master
---
gz-customerSystem/src/views/register/visit/component/map.jsx | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 164 insertions(+), 13 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index 2833d94..fd7dcfc 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -2,20 +2,171 @@
* @Author: dminyi 1301963064@qq.com
* @Date: 2024-08-17 14:41:57
* @LastEditors: dminyi 1301963064@qq.com
- * @LastEditTime: 2024-08-17 16:25:27
+ * @LastEditTime: 2024-08-27 10:17:49
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
* @Description: 地图
*/
-import React 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 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>
+ )
}
\ No newline at end of file
--
Gitblit v1.8.0