react-google-maps和google事件监听器 - 如何捕获事件？

Question

在我的应用程序中，我正在使用react-google-maps（v.6.x.x）来处理Google地图的api。我正在使用标记和信息框来显示正确的信息。信息框与enableEventPropagation设置为true，通过信息框传播事件到地图层 - 这是什么意思？当我有信息框 - 也就是infowindow，当我点击它，并在下面放置标记，这个标记首先被“点击”，并且比信息框中的任何html元素。如果enableEventPropagation是假的 - 没有任何传播。所以我的问题是 - 是否有可能为反应组件添加谷歌事件监听器，例如代码：

let infobox = (<InfoBox
  onDomReady={() => props.infoBoxReady(infobox)}
  defaultPosition={new google.maps.LatLng(props.activeMarker.location[1], props.activeMarker.location[0])}
  options={{
    closeBoxURL: ``, enableEventPropagation: true, pane: 'mapPane',
    position: new google.maps.LatLng(props.activeMarker.location[1], props.activeMarker.location[0]),
    alignBottom: true,
    pixelOffset: new google.maps.Size(-120, 0)
  }}>

我如何使用此代码来使用Google Event Listener

google.maps.event.addListener(infobox, 'domready', function ()

我得到这种错误

任何线索，我如何为它设置监听器，或者可能还有其他选项来设置谷歌地图的监听器 - 不幸的是我要使用这个库并处理信息框的点击

Answer 1

我能够阻止点击进入地图（停止传播）并且仍然能够点击InfoBox中的项目的唯一方法是设置“enableEventPropagation：false”，然后在“onDomReady”上为InfoBox中的项添加侦听器“道具。这可确保在呈现InfoBox后附加侦听器。不确定这是否是最佳解决方案，但确实有效。希望能帮助别人。

<InfoBox
  defaultPosition={new LatLng(marker.position.lat, marker.position.lng)}
  onDomReady={
      () => {
          let closeButton = $('a.close');
          let someLink = $('a.info-box-profile');

          closeButton.on('click', () => {
              // do something with the click
          });

          someLink.on('click', () => {
              // do something with the click
          });
      }
  }
  options={{
      pixelOffset: new Size(-145, 30),
      closeBoxURL: '',
      enableEventPropagation: false,
      boxStyle: {
          overflow: "hidden",
          width: "320px",
      }
  }}>

Answer 2

我写了这个包装器组件，在整个地图上放置一个<Rectangle/>，以阻止点击传递到下面的地图。虽然仍然允许你点击<infoBox/>内的东西。

这允许将enableEventPropagation设置为true而不会产生问题。然后我使用mouseOver和mouseOut来控制矩形的工作方式。在我的情况下，我使用点击矩形来关闭我的<InfoBox/>。您可以轻松地隐藏和显示它。

/* global google */
/* eslint-disable jsx-a11y/no-static-element-interactions */

import React from 'react';
import PropTypes from 'prop-types';
import { Rectangle } from 'react-google-maps';
import GoogleInfoBox from 'react-google-maps/lib/components/addons/InfoBox';

const cardWidth = 235;
const boxShadow = 25; // space for outer shadow
const iconHeight = 2; // the actual height is 48px but we use 6px instead to hide the icon but keep it's shadow

class InfoBox extends React.Component {
  constructor(props) {
    super(props);
    this.closable = true;
  }

  onClose = () => {
    if (this.closable) this.props.onClose();
  }

  onHover = () => {
    this.closable = false;
  }

  onMouseOut = () => {
    this.closable = true;
  }

  render() {
    const { children, position, onClose, type } = this.props;

    return (
      <div className="info-box">
        <Rectangle
          options={{ fillColor: '#ffffff', fillOpacity: 0.7, zIndex: 100 }}
          bounds={{ north: 90, south: -90, east: 180, west: -180 }}
          onClick={this.onClose}
        />
        <GoogleInfoBox
          position={new google.maps.LatLng(position.lat, position.lng)}
          onCloseClick={onClose}
          options={{
            alignBottom: true,
            disableAutoPan: false,
            pixelOffset: new google.maps.Size(-(cardWidth / 2) - boxShadow, -iconHeight),
            maxWidth: width,
            isHidden: false,
            visible: true,
            pane: 'floatPane',
            enableEventPropagation: true,
          }}
        >
          <div
            onMouseOver={this.onHover}
            onFocus={this.onHover}
            onMouseOut={this.onMouseOut}
            onBlur={this.onMouseOut}
          >
            { children }
          </div>
        </GoogleInfoBox>
      </div>
    );
  }
}

InfoBox.propTypes = {
  children: PropTypes.element.isRequired,
  position: PropTypes.shape({
    lat: PropTypes.number.isRequired,
    lng: PropTypes.number.isRequired,
  }).isRequired,
  onClose: PropTypes.func,
  type: PropTypes.string,
};

export default InfoBox;

Answer 3

您可以通过InfoBox组件上的props访问侦听器。

在这里查看：Github docs

你已经使用了一个 - onDomReady - 还有：

  onCloseClick: `closeclick`,
  onContentChanged: `content_changed`,
  onPositionChanged: `position_changed`,
  onZIndexChanged: `zindex_changed`,

Answer 4

不确定这是否有帮助，因为这是一个不同的反应谷歌地图插件，但问题似乎非常相似：https://github.com/fullstackreact/google-maps-react/issues/70