feat: 地图

zhangyongtian

2024-08-27 457f4a4be58936a7cbdefe307aad539cee1eb62a

 gz-customerSystem/src/views/register/visit/component/map.jsx

@@ -2,21 +2,171 @@
 * @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: 地图
 */
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}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}
                <div className='mapVicinityIcon'></div>
              </div>
            ))}
          </div>
        </Col>
      </Row>
    </div>
  )
}