Блог

Это MapContainer.js

 import React, { useEffect, useState } from 'react';
import { GoogleMap, LoadScript, Marker} from '@react-google-maps/api';


const MapContainer = () => {

    const [ currentPosition, setCurrentPosition ] = useState({});
  
    const success = position => {
      const currentPosition = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }
      setCurrentPosition(currentPosition);
    };
    
    useEffect (() => {
      navigator.geolocation.getCurrentPosition(success);
    })

    const mapStyles = {        
        height: "100vh",
        width: "100%"};
 
  
  return (
     <LoadScript googleMapsApiKey='AIzaSyA40-c3DnhRdFQ5In8xPdTgQSUne1UFhZI'>
       <GoogleMap mapContainerStyle={mapStyles} zoom={13} center={currentPosition}>
          {    
          currentPosition.lat amp;amp;
            ( 
              <Marker onClick={""} position={currentPosition}/> 
            )          
          } 
        </GoogleMap>
        
     </LoadScript>
  )
}

export default MapContainer;

  

И это ModalBootstrap.js

 import { render } from '@testing-library/react';
import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
import MapContainer from '../MapContainer/MapContainer';


function Example() {
    const [show, setShow] = useState (false);
  
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
  
    return (
      <>
        <Button variant="primary" onClick={handleShow}>
          Launch demo modal
        </Button>
  
        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
  
  render (<Example />);

  export default Example;

  

Я хочу показывать «Модальный», когда я нажимаю на маркер [в MapContainer.js ]. Я также хочу передать значение широты и долготы изMapContainer.js для ModalBootstrap.js . Я хочу передавать эти данные, когда нажимаю на маркер. Когда я нажимаю на маркер, появится модальное окно, и оно покажет текущую широту и долготу местоположения. Я успешно внедрил карту Google. Но не удалось передать значение в ModalBootStrap.js и показывать модальное, когда я нажимаю на маркер. Как я могу это сделать?

Переключите свой модальный режим на управление из родительского состояния вместо внутреннего состояния, так что установщиком состояния amp; state для модального show реквизита можно управлять, передавая эти состояния в качестве реквизитов компоненту Map. Примером этого является то, что ваш Example компонент и MapContainer component могут иметь один и тот же родительский компонент

 export default function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const [currentPosition, setCurrentPosition] = useState({});

  return (
    <>
      <MapContainer
        currentPosition={currentPosition}
        setCurrentPosition={setCurrentPosition}
        handleShow={handleShow}
      />
      <Example
        currentPosition={currentPosition}
        show={show}
        handleClose={handleClose}
        handleShow={handleShow}
      />
    </>
  );
}
  

Вернитесь к своему MapContainer компоненту, просто обновите его, чтобы использовать handleShow prop для onClick prop Marker , чтобы он контролировал открытие модального. Что касается currentPosition состояния, мы также можем переместить это состояние вверх, поскольку оно также будет использоваться модальным as для отображения широты и долготы.

 const MapContainer = ({ currentPosition, setCurrentPosition, handleShow }) => {
  ...
    return (
      <Marker onClick={handleShow} position={currentPosition} />
    )
      ...
  

Наконец, в модальном режиме просто используйте переданные currentPosition реквизиты для отображения данных по мере необходимости

 function Example({ show, handleShow, handleClose, currentPosition }) {
  return (
    ...
    <Modal.Body>
      Latitude: {currentPosition.lat} Longitude: {currentPosition.lng}
    </Modal.Body>
    ...
  )
}