在react google地图上定位side nav

npm install google-maps-react

import React from "react";
import { Map, GoogleApiWrapper } from "google-maps-react";

class MapContainer extends React.Component {
  render() {
    return (
      <div>
        {/* 这里放置 Side Nav 的内容 */}
        <div>
          <h1>Side Nav</h1>
          {/* 其他 Side Nav 内容 */}
        </div>

        {/* 这里放置 Google 地图 */}
        <Map
          google={this.props.google}
          zoom={14}
          initialCenter={{ lat: 37.7749, lng: -122.4194 }} // 设置初始地图中心位置的经纬度
        />
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "YOUR_GOOGLE_MAPS_API_KEY" // 在此处填入你的 Google Maps API 密钥
})(MapContainer);

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY"
  async
  defer
></script>

import React from "react";
import MapContainer from "./MapContainer";

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 其他应用程序内容 */}
        <h1>My App</h1>
        {/* ... */}
        
        {/* 使用 MapContainer 组件 */}
        <MapContainer />
      </div>
    );
  }
}

export default App;