react-google-maps和google事件监听器-如何捕获事件? [英] react-google-maps and google event listeners - how to catch events?

问题描述

在我的应用中，我正在使用react-google-maps(v.6.x.x)处理Google Maps的api.我正在使用标记和信息框来显示正确的信息.将 enableEventPropagation 设置为true的信息框，将事件通过信息框传播到地图图层-这是什么意思?当我有信息框-又名infowindow时，单击它，并在其下方放置标记，该标记首先被单击"，而不是infobox中的任何html元素.如果 enableEventPropagation 为false，则不会传播任何内容.所以我的问题是-是否有可能为react组件添加google事件监听器，例如代码:

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事件监听器

How I can use this code to use Google Event Listener

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

出现此类错误

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

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

这篇关于react-google-maps和google事件监听器-如何捕获事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！