From a30ae9c2331e5352a4f9d3f7e0ecfd36ff9d4e33 Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Tue, 27 Aug 2024 10:57:24 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh --- gz-customerSystem/src/views/register/visit/component/map.jsx | 72 +++++++++++++++++++---------------- 1 files changed, 39 insertions(+), 33 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..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-23 17:06:13 + * @LastEditTime: 2024-08-27 10:17:49 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx * @Description: 地图 */ @@ -21,11 +21,16 @@ }, }; +// 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.current) { @@ -40,6 +45,19 @@ } }, [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) => { @@ -51,7 +69,7 @@ mapRef.current.map.centerAndZoom(point, 15); mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name })); handleAnalysis(point, values.name); // 添加地点名称 - // searchNearbyPOIs(point); + // addCustomLabel(point, 'label'); // 添加自定义样式标签 } else { Message.warning('您输入的地址没有解析到结果!'); } @@ -60,6 +78,8 @@ }); } }; + + // 解析地址为中文 const handleAnalysis = (pt, name) => { @@ -72,41 +92,22 @@ if (name) { addName += ` ${name}`; // 添加地点名称 } - mapRef.current.map.centerAndZoom(pt, 15); - mapRef.current.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName })); + 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') }); }; - - // 搜索附近的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 - }); - - 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') + + + + + + + + return ( <div> @@ -141,8 +142,13 @@ onClick={(e) => { let pt = e.latlng; 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}> -- Gitblit v1.8.0