将侧面导航定位到React Google Maps

问题描述

您好，我正在使用npm模块google-map-react在Reactjs中制作带有Google地图的网站。

我最初使用的是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);

理想情况下，我会将其像背景图像一样放在后面，然后其他所有东西都可以放在上面。

解决方法

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

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

sidenav将显示在顶部