在 React Google 地图中创建自定义按钮

Question

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

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

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

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

我还查看了 react-google-maps 文档，但似乎这个特定的用例并没有在 API 中实现。

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

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

代码沙箱

地图容器.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>
);
}
}

菜单.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),
</>
);

我实际上用谷歌地图反应库做了这个，但它是同样的想法，你只需要添加

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

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