Javascript 在谷歌地图中创建自定义按钮

我目前正在使用

react google maps

进行一个个人项目，在地图上显示自定义按钮时遇到问题。我想创建一个悬停在地图上的菜单按钮，就像（搜索栏）的左上角一样

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

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

Menu.js

从“React”导入React；
导入“@fortwome/fontwome free/css/all.min.css”；
导出默认类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}

---

提前感谢你的帮助。在这一点上，任何想法/评论/见解都是值得赞赏的。我已经思考这个问题很长一段时间了，现在我不能再忽视它了…

如果您使用>=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),
    </>
);

---

这是一个有趣的问题，但我无法根据发布的代码重现它。请你提供一个有效的代码沙盒或stackblitz？我在问题中添加了一个代码沙盒链接。我现在正在使用@react google maps/api。我想它有你的功能。我正在看他的教程。在地图顶部添加了自动完成。我想这就是你想要的？

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