在 React Google Maps 中创建自定义按钮

Question

我目前正在使用react-google-maps 处理个人项目，但在地图上显示自定义按钮时遇到问题。我想创建一个悬停在地图上的菜单按钮，就像Google Maps（搜索栏）的左上角一样。

根据documentation 所说，您必须创建一个 div 并使用以下命令将其放在地图的特定一侧。

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(<div>);

但是，我无法让它与 React 很好地配合使用，因为 Google 文档是在 vanilla js 中的。在 React 中放置这行代码的好地方在哪里？我知道在 vanilla js 中你几乎可以把它放在任何地方。

我还查看了react-google-maps docs，但似乎这个特定用例并未在 API 中实现。

有没有办法在 React 或 react-google-maps 中轻松创建悬停在地图上的自定义按钮？如果没有，是否有一个巧妙的技巧可以让它以某种方式工作？或者可能是我不知道的 CSS 技巧？

这是我目前为该项目提供的一些示例代码：

Code sandbox

MapContainer.js

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap } from "react-google-maps";
import { compose, withProps } from "recompose";
import Menu from "./Menu";

// -----------------------------------------------------------------------------------------
// needed to construct Google Maps in React

const styles = require('../../assets/styles/GoogleMapStyles.json');


const MyMapComponent = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=YOUR_API_KEY",
        loadingElement: < div style={{ height: `100%` }} />,
        containerElement: < div style={{ height: `100%` }} />,
        mapElement: < div style={{ height: `100%` }} />
    }),
    withScriptjs,
    withGoogleMap
)((props) =>

    <GoogleMap
        defaultZoom={15}
        defaultCenter={props.location}
        defaultOptions={{styles: styles,
            disableDefaultUI: true}}
    >
        <Menu /> // the hamburger icon that I want hovered over the map
    </GoogleMap>
);

// -----------------------------------------------------------------------------------------

export default class MapContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {
                currentLocation: {lat: null, lng: null}
            },
            map: null
        };

    }

    componentDidMount() {
        .....
    }

    render() {
        return(
            <div id="map-container" ref="map">
                <MyMapComponent 
                location={this.state.user.currentLocation}/>
            </div>
        );
    }
}

Menu.js

import React from 'react';
import '@fortawesome/fontawesome-free/css/all.min.css';

export default class Menu extends React.Component {
    constructor(props) {
        super(props);
    }

    render() { 
        return(
            <div>
                <span className="menu-btn">
                    <i class="fas fa-bars"></i>
                </span>
            </div>
        );
    }
}

提前感谢您的帮助。在这一点上，任何想法/评论/见解都会受到赞赏。这个问题我想了很久了，现在已经到了不能再忽视它的地步了……

Answer 1

如果您使用 >= React 16.0，则有一种简单的方法：

在 Map 组件的返回值中使用预生成的 div 和 ReactDom.createPortal 并使用 map 参数调用 onload 以添加 div，如下所示：

import React from 'react';
import ReactDom from 'react-dom';
import { GoogleMap, withScriptjs, withGoogleMap } from "react-google-maps";
import { compose, withProps } from "recompose";
import Menu from "./Menu";

// -----------------------------------------------------------------------------------------
// needed to construct Google Maps in React

const styles = require('../../assets/styles/GoogleMapStyles.json');
const controlButtonDiv = document.createElement('div');
const handleOnLoad = map => {
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlButtonDiv);
};

const MyMapComponent = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=YOUR_API_KEY",
        loadingElement: < div style={{ height: `100%` }} />,
        containerElement: < div style={{ height: `100%` }} />,
        mapElement: < div style={{ height: `100%` }} />
    }),
    withScriptjs,
    withGoogleMap
)((props) =>

    <><GoogleMap
        defaultZoom={15}
        defaultCenter={props.location}
        defaultOptions={{styles: styles,
            disableDefaultUI: true}}
        onLoad={map => handleOnLoad(map)
    >
    </GoogleMap>,
    ReactDom.createPortal(<Menu />, controlButtonDiv),
    </>
);

我实际上是用 google-map-react 库做的，但想法是一样的，你只需要添加

yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => handleOnLoad(map, maps)}

作为属性并做同样的事情。