From a923c0ad0bc50abd9160b068abba60beea98275b Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Tue, 27 Aug 2024 10:22:12 +0800
Subject: [PATCH] 地图
---
gz-customerSystem/src/views/register/visit/component/map.jsx | 98 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 71 insertions(+), 27 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index 537463f..c319d6b 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -2,7 +2,7 @@
* @Author: dminyi 1301963064@qq.com
* @Date: 2024-08-17 14:41:57
* @LastEditors: dminyi 1301963064@qq.com
- * @LastEditTime: 2024-08-19 15:06:35
+ * @LastEditTime: 2024-08-27 10:17:49
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
* @Description: 地图
*/
@@ -21,54 +21,93 @@
},
};
+// var map = new window.BMapGL.Map("container");
+// map.centerAndZoom(new window.BMapGL.Point(116.401952, 40.032704), 12);
+// map.enableScrollWheelZoom();
+
+
+
export default function MapView(props) {
const mapRef = useRef()
const formRef = useRef()
const [addressList, setAddressList] = useState([])
useEffect(() => {
- if (mapRef) {
+ if (mapRef.current) {
let geolocation = new window.BMapGL.Geolocation();
- geolocation.getCurrentPosition(function (r) {
- if (this.getStatus() === 0) {
- handleAnalysis(r.point)
+ 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 addCustomLabel = (point, content) => {
+ // var label = new window.BMapGL.Label(content, {
+ // position: point,
+ // offset: new window.BMapGL.Size(10, 20)
+ // });
+ // label.setStyle({
+ // color: '#000',
+ // fontSize: '30px',
+ // border: '2px solid #1E90FF'
+ // });
+ // mapRef.current.map.addOverlay(label);
+ // };
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) {
+
+ 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 }))
+ mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }));
+ handleAnalysis(point, values.name); // 添加地点名称
+ // addCustomLabel(point, 'label'); // 添加自定义样式标签
} else {
Message.warning('您输入的地址没有解析到结果！');
}
- }, '广州市')
+ }, '广州市');
}
- })
+ });
}
- }
+ };
- //解析地址为中文
- const handleAnalysis = (pt) => {
+
+
+ // 解析地址为中文
+ const handleAnalysis = (pt, name) => {
let geoc = new window.BMapGL.Geocoder();
- geoc.getLocation(pt, function (rs) {
+ geoc.getLocation(pt, (rs) => {
+ console.log(rs, 'rsss')
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])
- })
- }
+ 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);
+ console.log(pt, addName, 'pt', 'addName')
+ });
+ };
+
+ console.log(addressList, 'addressList')
+
+
+
+
+
+
+
+
return (
<div>
@@ -84,7 +123,7 @@
label='查询位置：'
field='name'
>
- <Input placeholder='请输入' style={{ width: '515px' }} />
+ <Input placeholder='请输入' style={{ width: '522px' }} />
</FormItem>
<Button style={{ marginRight: '20px' }}>
重置
@@ -102,17 +141,22 @@
enableScrollWheelZoom
onClick={(e) => {
let pt = e.latlng;
- handleAnalysis(pt)
+ handleAnalysis(pt, null);
+ // addCustomLabel(pt, 'label'); // 添加自定义样式标签
}}
>
+ <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
+ <NavigationControl />
+ <InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="内容" title="标题" />
+
</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>
- })}
+ {addressList?.map((item, index) => (
+ <div key={index}>{item.address} {item.title}</div>
+ ))}
</div>
</Col>
</Row>
--
Gitblit v1.8.0