反应谷歌地图和谷歌事件listneres - 如何捕捉事件？ [英] react-google-maps and google event listneres - how to catch events?

问题描述

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

In my app I'm using react-google-maps (v.6.x.x) to handle api for Google Maps. I'm using markers and infobox to show proper information. Infobox with enableEventPropagation set to true, propagates events to map layer through the infobox - what does that mean? When I have infobox - aka infowindow whe I click on it, and underneath is placed marker, this marker is 'clicked' in first place, and than any html element in infobox. If enableEventPropagation is false - nothing is propagated. So my question is - is there any possibility to add google event listener for react component, for example code:

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

How I can use this code to use Google Event Listener

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

我得到这样的错误

任何线索，我怎么能为它设置监听器，或者有其他选项可以为google map设置监听器 - 很遗憾我必须使用这个库，并处理点击信息框

Any clue, how can I set listener for it, or maybe there are other options to set listeners for google map - unfortunately I've to use this library and handle clicks on infobox

推荐答案

唯一能够阻止点击进入地图的方法（停止传播），并且仍然可以单击InfoBox中的项目，方法是设置enableEventPropagation：false，然后在onDomReady道具上的InfoBox中的项目中添加侦听器。这可以确保在InfoBox被渲染后，侦听器被连接。不知道这是否是最好的解决方案，但它确实有效。希望可以帮助别人。

The only way I was able to prevent clicks through to the map (stop propagation) and still be able to click items in the in InfoBox is by setting "enableEventPropagation: false" and then adding listeners for the items in the InfoBox on the "onDomReady" prop. This makes sure that the listeners are attached after the InfoBox is rendered. Not sure if thats the best solution, but it did work. Hope that helps someone.

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

这篇关于反应谷歌地图和谷歌事件listneres - 如何捕捉事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！