如何在 React 谷歌地图组件之上加载 <div>？

Question

我试图在这个https://www.npmjs.com/package/@react-google-maps/api 包提供的谷歌地图组件上显示一张小卡片。我将 zIndex 设置为 2，但 <div> 仍显示在此地图组件下方。

卡片元素不应该响应任何点击它只是在第一次加载地图组件时显示

  return (
    <div>
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={8}
        center={center}
      ></GoogleMap>
      <Tracking style={{zIndex: 2}}/>
    </div>
  );

tracking是包含信息的div。

地图容器样式为：

const mapContainerStyle = {
  width: "100vw",
  height: "100vh",
};

Answer 1

其实有很多方法可以做到。

简单地说：

1. 您必须将position: 'relative' 添加到父组件。
2. 您必须将position: 'absolute' 和zIndex: 0 添加到要显示为背景的子组件中。
3. 您必须将position: 'absolute' 和zIndex: 1（或更多）添加到要显示为前景的子组件中。

如果你使用内联样式，你可以这样做：

添加top: some_number、left: some_number、right: some_number 或bottom: some_number 是可选的（取决于您想要的位置）

这是工作代码沙箱https://codesandbox.io/s/compassionate-rhodes-qbm43

App.js

import "./styles.css";
import Map from "./Map.js";
import Tracking from "./Tracking";

export default function App() {
  return (
    <div
      style={{
        position: "absolute",
        zIndex: 0,
        width: "100%", // or you can use width: '100vw'
        height: "100%" // or you can use height: '100vh'
      }}
    >
      <Map />
      <div
        style={{
          zIndex: 1,
          position: "absolute",
          top: 10,
          left: 10,
          backgroundColor: "white", // you can use any color value
          width: "10%", // or you can use width: any_number
          height: "90%" // or you can use height: any_number
        }}
      >
        <Tracking />
      </div>
    </div>
  );
}

地图.js

import React from "react";
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow
} from "@react-google-maps/api";
import Tracking from "./Tracking";
const libraries = ["places"];

const mapContainerStyle = {
  position: "relative",
  width: "100%",
  height: "100%"
};

const center = {
  lat: -33.86882,
  lng: 151.20929
};

function Map() {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
    libraries
  });

  if (loadError) return "Error loading maps";
  if (!isLoaded) return "Loading Maps";
  return (
    <div
      style={{
        position: "absolute",
        zIndex: 0,
        width: "100%", // or you can use width: '100vw'
        height: "100%" // or you can use height: '100vh'
      }}
    >
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={8}
        center={center}
      ></GoogleMap>
    </div>
  );
}

export default Map;

Tracking.js

import React from "react";

const Tracking = () => {
  return (
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  );
};

export default Tracking;