react- google-maps хуков и getBound () - PullRequest
Новая
       38

react- google-maps хуков и getBound ()

0 голосов
/ 09 июля 2020

Я создаю приложение, которое обновляет маркеры каждый раз, когда пользователь перемещает карту. Я использую метод onBoundChanges для получения границ и сохранения их в хуках (setBounds (mapBounds).) К сожалению, когда я пытаюсь сохранить его в хуке с setBounds (mapBounds), он отправляет приложение на al oop. У вас есть идеи, как обойти проблему?

Спасибо

Вот моя основная функция 

import React, { useState, useEffect, Fragment } from "react";

import {
  GoogleMap,
  LoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";

const containerStyle = {
  Display: "flex",
  height: "100vh",
  width: "100%",
};

const divStyle = {
  background: `white`,
  border: `1px solid #ccc`,
  padding: 15,
};

const onLoad = (infoWindow) => {
  console.log("infoWindow: ", infoWindow);
};

const position = {
  lat: 43.6532,
  lng: -79.3832,
};
const center = {
  lat: 43.6532,
  lng: -79.3832,
};

function ReactMap() {
  const [selected, setSelected] = useState(null);
  const [bounds, setBounds] = useState(center);

  const mapRef = React.useRef();

  const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
  }, []);

  const onMapBoundsChanged = React.useCallback((map) => {
    const latlongchange = mapRef.current.getBounds();
    const lat = latlongchange.Ua.i;
    const lng = latlongchange.Ua.j;

    const mapBounds = {
      lat: lat,
      lng: lng,
    };
    //setBounds(mapBounds);
    console.log(mapBounds);
  }, []);

  return (
    <Fragment>
      <LoadScript googleMapsApiKey="">
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          onLoad={onMapLoad}
          onBoundsChanged={onMapBoundsChanged}
          zoom={14}
        >
          {selected ? (
            <InfoWindow
              onLoad={onLoad}
              position={position}
              onCloseClick={() => {
                setSelected(null);
              }}
            >
              <div style={divStyle}>
                <h1>La place</h1>
              </div>
            </InfoWindow>
          ) : null}
          <Marker
            className="marker"
            position={position}
            name="My Marker"
            color="blue"
            onClick={() => {
              setSelected(true);
            }}
          />
        </GoogleMap>
      </LoadScript>
    </Fragment>
  );
}

export default ReactMap;

введите описание изображения здесь

1 Ответ

0 голосов
/ 09 июля 2020

Хорошо. Может стоит использовать дополнительный хук для устранения неполадок? Например:

Шаг 1: Перехват useDebouncedCallback.js

import { useEffect, useRef } from 'react'

export function useDebouncedCallback(callback, wait) {
  const argsRef = useRef()
  const timeout = useRef()

  function cleanup() {
    if (timeout.current) clearTimeout(timeout.current)
  }

  useEffect(() => cleanup, [])

  return function debouncedCallback(...args) {
    argsRef.current = args

    cleanup()

    timeout.current = setTimeout(() => {
      if (argsRef.current) callback(...argsRef.current)
    }, wait)
  }
}

Шаг 2: Ваш React.F C

// ...
import { useDebouncedCallback } from '@/common/hooks/useDebouncedCallback'

function ReactMap() {
  // ...

  const onMapBoundsChangedDebounced = useDebouncedCallback(onMapBoundsChanged, 500)

  return (
    <Fragment>
      <LoadScript googleMapsApiKey="">
        <GoogleMap
          // ...
          onBoundsChanged={onMapBoundsChangedDebounced}
          // ...
        >

Шаг 3: использовать константу center в качестве начального состояния (не пустой массив) 

const position = {
  lat: 43.6532,
  lng: -79.3832,
};
const center = {
  lat: 43.6532,
  lng: -79.3832,
};

function ReactMap() {
  const [selected, setSelected] = useState(null);
  const [bounds, setBounds] = useState(center);
// ...
...