地图

dminyi

2024-08-27 a923c0ad0bc50abd9160b068abba60beea98275b

 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}>