MapAddressBtn.jsx

import React, {useState} from 'react';
import { Row, Col, Input, Button } from 'antd';
import MapSelectAddress from './MapSelectAddress';

const MapAddressBtn = (props) => {
  const [pos, setPos] = useState({});
  const [address, setAddress] = useState();
  const [mapVisible, setMapVisible] = useState(false);


  const changeAddress = (pos, address) => {
    console.log(pos)
    setPos(pos);
    setAddress(address);
    // this.props.onChange({...pos, address,});
  }

  const changeMapVisible = () => {
    setMapVisible(!mapVisible)
  }
  return (
    <div>
      <Row gutter={8}>
        <Col span={19}>
          <Input readOnly={true} value={address} allowClear={true}/>
        </Col>
        <Col span={4}>
          <Button onClick={changeMapVisible}>选择</Button>
        </Col>
      </Row>

      <MapSelectAddress
        visible={mapVisible}
        onChangeMapVisible={changeMapVisible}
        initMarker={[pos.latitude || 0, pos.longitude || 0]}
        address={ address || '' }
        onChange={ (pos, addr)=> changeAddress(pos, addr) }
      />
    </div>
  );
};

export default MapAddressBtn;