在反应谷歌地图上定位侧导航答案

【问题标题】：positioning side nav over react google maps在反应谷歌地图上定位侧导航
【发布时间】：2021-02-18 02:48:42
【问题描述】：

您好，我正在使用 npm 模块 google-map-react 在 Reactjs 中创建一个带有谷歌地图的网站。

我最初使用模块 npm google-maps-react，现在决定使用 google-map-react。

第一个 npm 包运行良好，但现在我的侧边导航显示在地图上方而不是并排显示。

如果有任何区别，侧面导航正在使用 react-transtion-group。看起来像这样

侧边导航CSS

 #mySidenav a {
  position: absolute;
  left: -10px;
  transition: 0.3s;
  padding: 9px;

  text-decoration: none;
  font-size: 20px;
  color: black;
  border-radius: 0 5px 5px 0;
  border: 1px solid #000000;
}

#mySidenav a:hover {
  left: 0px;
  cursor: pointer;
  background-color: gray;
}

#contact {
  background-color: rgb(228, 225, 225);
}
/* slide enter */
.slide-enter {
  opacity: 0;
  transform: scale(0.97) translateX(5px);
  z-index: 1;
}
.slide-enter.slide-enter-active {
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: opacity 3000ms linear 1000ms, transform 3000ms ease-in-out 1000ms;
}

/* slide exit */
.slide-exit {
  opacity: 1;
  transform: scale(1) translateX(0);
}
.slide-exit.slide-exit-active {
  opacity: 0;
  transform: scale(0.97) translateX(5px);
  transition: opacity 1500ms linear, transform 1500ms ease-out;
}
.slide-exit-done {
  opacity: 0;
}

App.Js

class App extends Component {
  render() {
    return (
      <Switch>
        <Route
          exact
          path="/reactapp"
          render={() => (
            <div id="wrapper">
              <TopNav />
              <SideNav />

              <MapContainer />
            </div>
          )}
        />
      </Switch>
    );
  }
}

地图

import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
import { connect } from "react-redux";
import { fetchPosts, fetchItins } from "../../actions/postActions";
import PropTypes from "prop-types";

export class MapContainer extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33,
    },
    zoom: 11,
  };

  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
  };
  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true,
    });
  onMapClicked = (props) => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null,
      });
    }
  };
  componentDidMount() {}

  toggleWindow() {
    if (this.state.showingInfoWindow) {
    } else if (!this.state.showingInfoWindow) {
    }
  }

  render() {
    console.log(this.props.posts);
    return (
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: "AIzaSyAfpKoor5CLGg-HbDwdKHq9mGij2JA-YzE" }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        ></GoogleMapReact>
      </div>
    );
  }
}

MapContainer.propTypes = {
  fetchPosts: PropTypes.func.isRequired,
  posts: PropTypes.object.isRequired,
  // newPost: PropTypes.object
};
const mapStateToProps = (state) => ({
  posts: state.posts.items,
  // newPost: state.posts.item
});

export default connect(mapStateToProps, { fetchPosts })(MapContainer);

理想情况下，我会将其作为背景图像放在后面，然后其他所有内容都可以放在上面。

【问题讨论】：

标签： javascript css reactjs react-google-maps

【解决方案1】：

我通过将每个图层设置为具有 zindex (css) 来解决此问题。然后，您可以根据 z 索引将内容加载到其他对象之上。

例如地图 z 索引 = 0 sidenav z index = 1;

sidenav 将出现在顶部

【讨论】：