onClick OverlayView react-google-maps答案

【问题标题】：onClick OverlayView react-google-mapsonClick OverlayView react-google-maps
【发布时间】：2018-11-10 18:31:41
【问题描述】：

我不明白为什么OverlayView 中的onclick 不起作用。我把一个自定义对象（一个简单的 div）作为子对象，是 BaloonLocationJob。

如何使OverlayView 可点击？

<GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: props.job.latitude, lng: props.job.longitude }}
        options={{mapTypeControl:false,navigationControl:false,streetViewControl:false,scaleControl:false}}>
        {
            <OverlayView
                key={Math.random()}
                position={{ lat: props.job.latitude, lng: props.job.longitude }}
                onClick={props.hello}
                mapPaneName={OverlayView.OVERLAY_LAYER}>
                <BaloonLocationJob address={props.job.address} onClick={props.onToggleOpen/* todo: capire xke cazzo diocane non si triggera l'onclick*/}/>
            </OverlayView>
        }
</GoogleMap>

【问题讨论】：

我不认为OverlayView 可以有一个onClick 属性，但它里面的组件可以。 onClick={props.onToggleOpen} 不工作吗？
不幸的是，这是我的第一次尝试.. 子元素中的 onclick 也不起作用

标签： reactjs react-google-maps

【解决方案1】：

发现问题。这是我的错，我没有正确阅读文档。我刚刚更改了 OverlayView 组件中的 mapPaneName 属性：

    <OverlayView
            key={Math.random()}
            position={{ lat: props.job.latitude, lng: props.job.longitude }}
            mapPaneName={OverlayView.OVERLAY_LAYER}>
            <BaloonLocationJob address={props.job.address}  onClick={props.onToggleOpen}/>
        </OverlayView>

到：

    <OverlayView
            key={Math.random()}
            position={{ lat: props.job.latitude, lng: props.job.longitude }}
            mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
            <BaloonLocationJob address={props.job.address}  onClick={props.onToggleOpen}/>
        </OverlayView>

【讨论】：