Question

我正在开发一个React应用程序，该应用程序最终应允许用户地理参考地图；到目前为止，我已经部署了https://codesandbox.io/s/github/khpeek/overlayr。我已经改编了https://codesandbox.io/s/lx947qjv0z中的代码，并对原始代码有一些疑问。

我的问题是关于传递到events组件的Map道具：

import React, { useEffect } from "react";
import useGoogleMap from "../hooks/useGoogleMap";

export default function Map({ center, zoom, children, events }) {
  const { maps, map, mapRef, loading } = useGoogleMap({ zoom, center, events });

  useEffect(
    () => {
      map && map.panTo(center);
    },
    [center.lat, center.lng]
  );

  return (
    <div className="map-container">
      <div ref={mapRef} className="map-ref" />
      {!loading &&
        React.Children.map(children, child => {
          return React.cloneElement(child, { map, maps });
        })}
    </div>
  );
}

在App.js中，Map组件的用法如下：

import React, { useState } from 'react';
import './App.css';
import Map from './components/Map'
import GroundOverlay from './components/GroundOverlay';

function App() {
  const [bounds, setBounds] = useState({});

  return (
    <div className="App">
      <Map
        zoom={12}
        center={{ lat: 40.740, lng: -74.18 }}
        events={{ onBoundsChanged: arg => setBounds(arg) }}
      >
        <GroundOverlay
          url='https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
          bounds={{
            north: 40.773941,
            south: 40.712216,
            east: -74.12544,
            west: -74.22655
          }}
          opacity={0.5}/>
      </Map>
    </div>
  );
}

export default App;

在useGoogleMap自定义钩子中，events用于将侦听器添加到map对象：

import { useEffect, useState, useRef } from "react";
import GoogleMapsApiLoader from "google-maps-api-loader";

const apiKey = "AIzaSyCVBthtEmWi0Ul8mejDQrBlOULXB1kTB3I";

const eventsMapping = {
  onCenterChanged: ["center_changed", map => map.getCenter()],
  onBoundsChanged: ["bounds_changed", map => map.getBounds()]
};

export default function useGoogleMap({ zoom, center, events }) {
  const [mapState, setMapState] = useState({ loading: true });
  const mapRef = useRef();
  useEffect(() => {
    GoogleMapsApiLoader({ apiKey }).then(google => {
      const map = new google.maps.Map(mapRef.current, { zoom, center });

      Object.keys(events).forEach(eventName =>
        map.addListener(eventsMapping[eventName][0], () =>
          events[eventName](eventsMapping[eventName][1](map))
        )
      );

      setMapState({ maps: google.maps, map, loading: false });
    });
  }, []);
  return { mapRef, ...mapState };
}

据我了解，在这种情况下，此代码应该可以做到

map.addListener('bounds_changed', setBounds(map.getBounds()))

那么，我期望的是，每当我拖动地图时，bounds组件的App状态变量都应该得到更新。

但是，这不是我在React调试器工具中观察到的。那里，App组件的状态为空：

简而言之，我不清楚events组件的Map道具实际上是做什么的？为什么在bounds组件的状态下看不到App？

更新

似乎React调试器工具中的'Hooks'->'State'实际上代表了bounds的状态。但是，问题仍然存在，为什么它一直显示空白对象，并且拖动地图时边界不会改变？

无法在React应用中调用Google Maps事件监听器？

更新

0 个答案: