feat: 地图

zhangyongtian

2024-08-22 0ee05af293847f16967b0fc6c5139aaf50c8be3a

feat: 地图

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

@@ -6,17 +6,93 @@
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
 * @Description: 地图
 */
import React from 'react';
import React, { useRef } from 'react';
import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl';
export default function MapView() {
import { Form, Input, Button, Message } from '@arco-design/web-react';
import { Row, Col } from 'antd';
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 17,
  },
};

export default function MapView(props) {
  const mapRef = useRef()
  const formRef = useRef()

  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) {
            if (point) {
              mapRef.current.map.centerAndZoom(point, 16);
              mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }))
            } else {
              Message.warning('您输入的地址没有解析到结果！');
            }
          }, '广州市')
        }
      })
    }
  }
    
    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="地标" />
      <Row gutter={[16, 0]}>
        <Col span={16}>
          <Form
            ref={formRef}
            layout='inline'
            {...formItemLayout}
            style={{ marginBottom: '8px' }}
          >
            <FormItem
              label='查询位置：'
              field='name'
            >
              <Input placeholder='请输入' style={{ width: '515px' }} />
            </FormItem>
            <Button style={{ marginRight: '20px' }}>
              重置
            </Button>
            <Button
              type="primary"
              onClick={handleSubmit}
            >
              查询
            </Button>
          </Form>
          <Map
            ref={mapRef}
            center={{ lng: 116.402544, lat: 39.928216 }}
            zoom="11"
            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);
              })
            }}
          >
            <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>
        </Col>
      </Row>
        </div>
    )
}

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

@@ -714,6 +714,8 @@
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <ApplyDialog
          dialogType={dialogType}
@@ -747,43 +749,20 @@
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <DetailDialog />
      </Modal>
      <Modal style={{ width: '1200px' }} visible={mapView} onCancel={() => setMapView(false)} footer={null} title='选择纠纷发生地' centered>
        <Row gutter={[16, 0]}>
          <Col span={16}>
            <Form
              ref={formRef}
              requiredSymbol={false}
              layout='inline'
              {...formItemLayout}
              style={{ marginBottom: '8px' }}
      <Modal
        style={{ width: '1200px' }}
        visible={mapView}
        onCancel={() => setMapView(false)}
        footer={null}
        title='选择纠纷发生地'
        centered
            >
              <FormItem
                label='查询位置：'
                field='name'
                onChange={(e) => console.log(e.target.value, 'vvv')}
              >
                <Input placeholder='请输入' style={{ width: '515px' }} />
              </FormItem>
              <Button style={{ marginRight: '20px' }}>
                重置
              </Button>
              <Button
                type="primary"
              // onClick={handleSave}
              >
                查询
              </Button>
            </Form>
            <MapView />
          </Col>
          <Col span={8}>
            <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div>
          </Col>

        </Row>
      </Modal>
    </div>
  )