Google maps 反应谷歌地图和谷歌事件监听器-如何捕捉事件？_Google Maps_Reactjs

Google maps 反应谷歌地图和谷歌事件监听器-如何捕捉事件？

google-maps reactjs

Google maps 反应谷歌地图和谷歌事件监听器-如何捕捉事件？,google-maps,reactjs,Google Maps,Reactjs,在我的应用程序中，我使用react谷歌地图（v.6.x.x）来处理谷歌地图的api。我使用标记和信息框来显示正确的信息。如果信息框的enableeventprogation设置为true，则通过信息框将事件传播到映射层-这意味着什么？当我点击infobox-aka infowindow时，在它下面放置了一个标记，这个标记首先被“点击”，并且比infobox中的任何html元素都要多。如果enableventpropagation为false，则不会传播任何内容。所以我的问题是-是否有可能为rea

在我的应用程序中，我使用react谷歌地图（v.6.x.x）来处理谷歌地图的api。我使用标记和信息框来显示正确的信息。如果信息框的

enableeventprogation

设置为true，则通过信息框将事件传播到映射层-这意味着什么？当我点击infobox-aka infowindow时，在它下面放置了一个标记，这个标记首先被“点击”，并且比infobox中的任何html元素都要多。如果

enableventpropagation

为false，则不会传播任何内容。所以我的问题是-是否有可能为react组件添加google事件侦听器，例如代码：

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)
  }}>

我犯了这样的错误

任何线索，我如何为它设置监听器，或者可能有其他选项为谷歌地图设置监听器-不幸的是，我必须使用此库并处理对infobox的单击

您可以通过infobox组件上的道具访问监听器

请在此处查看：

您已经在使用一个-

onDomReady

-还有：

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

您可以通过InfoBox组件上的道具访问侦听器

请在此处查看：

您已经在使用一个-

onDomReady

-还有：

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

我能够阻止点击地图（停止传播）并仍然能够点击in信息框中的项目的唯一方法是设置“enableEventPropagation:false”，然后在“onDomReady”属性上为信息框中的项目添加侦听器。这样可以确保在呈现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",
      }
  }}>

{
让closeButton=$（'a.close'）；
让someLink=$（'a.info-box-profile'）；
closeButton.on（'单击'，（）=>{
//按一下按钮做点什么
});
someLink.on（'click'，（）=>{
//按一下按钮做点什么
});
}
}
选择权={{
像素偏移：新大小（-145,30），
closeBoxURL:“”，
enableEventPropagation:false，
箱式：{
溢出：“隐藏”，
宽度：“320px”，
}
}}>

<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",
      }
  }}>

{
让closeButton=$（'a.close'）；
让someLink=$（'a.info-box-profile'）；
closeButton.on（'单击'，（）=>{
//按一下按钮做点什么
});
someLink.on（'click'，（）=>{
//按一下按钮做点什么
});
}
}
选择权={{
像素偏移：新大小（-145,30），
closeBoxURL:“”，
enableEventPropagation:false，
箱式：{
溢出：“隐藏”，
宽度：“320px”，
}
}}>

我编写了这个包装器组件，它在整个地图上放置一个

，以阻止点击传递到下面的地图。同时仍然允许您单击

中的内容

这允许

enableEventPropagation

设置为

true

，而不会产生问题。然后我使用

mouseOver

和

mouseOut

控制矩形的工作方式。在我的例子中，我使用单击矩形来关闭我的

。你可以很容易地隐藏和显示它

/* 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;

/*全球谷歌*/
/*eslint禁用jsx-a11y/无静态元素交互*/
从“React”导入React；
从“道具类型”导入道具类型；
从“react google maps”导入{Rectangle}；
从“react google maps/lib/components/addons/InfoBox”导入GoogleInfoBox；
常数cardWidth=235；
常数boxShadow=25；//外阴影空间
常数iconHeight=2；//实际高度为48px，但我们使用6px来隐藏图标，但保持其阴影
类InfoBox扩展了React.Component{
建造师（道具）{
超级（道具）；
this.closable=true；
}
onClose=（）=>{
如果（this.closable）this.props.onClose（）；
}
onHover=（）=>{
this.closable=false；
}
onMouseOut=（）=>{
this.closable=true；
}
render（）{
const{children，position，onClose，type}=this.props；
返回(
{儿童}
);
}
}
InfoBox.propTypes={
子项：PropTypes.element.isRequired，
位置：PropTypes.shape({
lat:PropTypes.number.isRequired，
lng:PropTypes.number.isRequired，
}).要求，
onClose:PropTypes.func，
类型：PropTypes.string，
};
导出默认信息框；