react-google-maps和google事件listneres - 如何捕捉事件？

Question

在我的應用程序中，我使用react-google-maps（v.6.x.x）來處理Google Maps的api。我正在使用標記和信息框來顯示正確的信息。信息框與enableEventPropagation設置爲true，通過信息框將事件傳播到地圖層 - 這是什麼意思？當我有信息框 - 也就是infowindow，當我點擊它，並且在下面放置標記時，這個標記首先被'點擊'，並且比信息框中的任何html元素都要好。如果enableEventPropagation爲false - 則不傳播任何內容。所以我的問題是 - 是否有可能加入谷歌事件偵聽器反應組件，例如代碼：

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.maps.event.addListener(infobox, 'domready', function() 

即時得到這個一種錯誤

任何線索，如何爲它設置監聽器，或許還有其他的選擇來設置監聽器谷歌地圖 - 不幸的是我已經使用這個庫和信息框

處理點擊

Answer 1

您可以通過InfoBox組件上的道具訪問偵聽器。 onDomReady - - 你已經在使用一個Github docs

這裏還有：

檢查出來這裏

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

Answer 2

我能夠防止點擊通過對地圖的唯一方法（停止傳播）仍然可以點擊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 3

我寫了一個放置在<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;