From 27b935c319f75ee68dde68e7f666b4c3befd0ba0 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Thu, 22 Aug 2024 16:53:17 +0800
Subject: [PATCH] feat：地图弹窗
---
gz-customerSystem/src/views/register/visit/component/map.jsx | 47 +++++++++++++++++++++++++++++++++++------------
1 files changed, 35 insertions(+), 12 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index 7e2e441..537463f 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -6,7 +6,7 @@
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
* @Description: 地图
*/
-import React, { useRef } from 'react';
+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 { Row, Col } from 'antd';
@@ -24,6 +24,20 @@
export default function MapView(props) {
const mapRef = useRef()
const formRef = useRef()
+ const [addressList, setAddressList] = useState([])
+
+ useEffect(() => {
+ if (mapRef) {
+ let geolocation = new window.BMapGL.Geolocation();
+ geolocation.getCurrentPosition(function (r) {
+ if (this.getStatus() === 0) {
+ handleAnalysis(r.point)
+ } else {
+ Message.warning('failed' + this.getStatus());
+ }
+ });
+ }
+ }, [mapRef])
const handleSubmit = () => {
if (formRef.current) {
@@ -33,7 +47,7 @@
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint(values.name, function (point) {
if (point) {
- mapRef.current.map.centerAndZoom(point, 16);
+ mapRef.current.map.centerAndZoom(point, 15);
mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }))
} else {
Message.warning('您输入的地址没有解析到结果！');
@@ -42,6 +56,18 @@
}
})
}
+ }
+
+ //解析地址为中文
+ const handleAnalysis = (pt) => {
+ 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
+ mapRef.current.map.centerAndZoom(pt, 15);
+ mapRef.current.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName }))
+ setAddressList([addName])
+ })
}
return (
@@ -72,25 +98,22 @@
</Form>
<Map
ref={mapRef}
- center={{ lng: 116.402544, lat: 39.928216 }}
- zoom="11"
+ zoom="15"
enableScrollWheelZoom
onClick={(e) => {
let pt = e.latlng;
- let geoc = new window.BMapGL.Geocoder();
- geoc.getLocation(pt, function (rs) {
- let addComp = rs.addressComponents;
- console.log(addComp);
- // console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
- })
+ handleAnalysis(pt)
}}
>
- <Marker position={{ lng: 113.27, lat: 23.12 }} />
- <InfoWindow position={{ lng: 113.27, lat: 23.12 }} text="广州市" />
</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>
</Col>
</Row>
</div>
--
Gitblit v1.8.0