将 React 组件渲染到 GoogleMaps InfoBox 中 - 停止点击 - Rendering React Component into GoogleMaps InfoBox

我在React应用程序中使用谷歌地图信息框时遇到了问题。我的目标是在谷歌地图实例上打开一个空的信息框，然后使用 ReactDOM.render 将我的组件放入其中。该组件由一组选项卡组成，每个选项卡窗格在打开时通过 redux 和 thunk 进行 API 调用。

这一切都很好用，它显示得很好。问题来自实际单击信息框。我可以通过以下两种方式之一使其工作，方法是将启用事件传播更改为真或假：

enableEventPropagation = true：组件工作，所有选项卡和按钮，但是如果我碰巧单击信息框的右侧，将打开信息框下方的任何标记，这完全破坏了我的应用程序的状态和流程。
enableEventPropagation = false：点击不会进入地图，但随后反应组件中的任何点击事件都不起作用。没有标签，没有按钮：什么都没有。看起来很棒，但根本不起作用。

这是我创建信息框并使用 ReactDOM 渲染到它的代码：

renderInfoBox() {
let {map, google, infoBox} = this.props;
let markerElement = MarkerElementService.getMarkerElement(infoBox.ui.markerId);
this.infoBox = new this.infoBoxClass({
content: this.refs.infoBoxHolder,
enableEventPropagation: false,
pixelOffset: new google.maps.Size(10, -275),
maxWidth: 350,
zIndex: 99999999,
infoBoxClearance: new google.maps.Size(75, 75)
});
ReactDOM.render(
<Provider store={AppStore}>
<ThemeProvider theme={Theme}>
<InfoBoxComponent google={google} onClose={this.closeButtonClicked.bind(this)} />
</ThemeProvider>
</Provider>,
this.refs.infoBoxHolder,
() => {
this.infoBox.open(map, markerElement);
}
);
}
render() {
return (
<div ref="infoBoxHolder" />
);
}

我尝试了以下解决方案：

切换到谷歌地图覆盖。完全相同的问题，实际上查看InfoBox插件，似乎InfoBox是OverLay的包装器，有助于消除其中一些问题，但仍然假设它只会是非交互式的。
在我的组件内部的各个点禁用事件传播，但效果是它禁用了 DOM 树向下而不是向上的事件传播，这意味着子组件不起作用！狂！

似乎我剩下的唯一选择是在渲染 InfoBox 后以某种方式计算它的纬度/LNG 边界，然后依次禁用该区域中的所有标记，但这是我想避免的废话！

或者也许我有完全错误的方法？

您可以尝试一些方法。

首先，如果你没有很多标记，你绝对可以尝试将你的标记优化标志设置为false。它会将它们渲染为单独的 DOM 元素，从而降低性能，但您不会像您正在经历的那样获得奇怪的行为。

我无法使用普通标记重现您的问题，但能够使用默认添加的 POI 重现您的问题。为了防止在信息框后面打开任何标记，您可以在enter上创建一个侦听器，在信息框上创建一个leave，该侦听器将设置一个布尔值，并覆盖set方法InfoWindow以在悬停时取消默认行为。您仍然可以看到鼠标光标在变化，但可以使用一些基本的 CSS 将其删除。

这是一个例子，点击标记后尝试点击Sechelt Aquatic Center标记打开InfoxBox，你应该做不到。

function initialize () {
let enableMarkers = true

const set = google.maps.InfoWindow.prototype.set;
google.maps.InfoWindow.prototype.set = function (key, val) {
if (key === 'map') {
if (!enableMarkers) {
return
}
}
set.apply(this, arguments)
}
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(49.47216, -123.76307),
mapTypeId: google.maps.MapTypeId.ROADMAP,
})
const marker = new google.maps.Marker({
map,
draggable: true,
position: new google.maps.LatLng(49.47216, -123.76307),
visible: true
})
const box = document.createElement('div')
box.innerHTML = 'Hello <br> Hello <br> Hello'
google.maps.event.addListener(marker, 'click', function (e) {
if (!enableMarkers) { return }
ib.open(map, this)
})
const ib = new InfoBox({
content: box,
zIndex: 10,
pixelOffset: new google.maps.Size(-100, 0),
boxStyle: { 
background: 'white',
padding: '5px',
opacity: 0.75,
width: '200px',
},
closeBoxMargin: '2px',
closeBoxURL: 'https://www.google.com/intl/en_us/mapfiles/close.gif',
isHidden: false,
enableEventPropagation: true,
})

box.addEventListener('mouseenter', () => {
enableMarkers = false
})

box.addEventListener('mouseleave', () => {
enableMarkers = true
})
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="https://rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<body onload="initialize()">
<div id="map" style="width: 100%; height: 200px"></div>
</body>

我还在一些地方看到人们遇到了同样的问题，不得不等待 InfoBoxdomready事件开始绑定他们的点击。不要真的认为这很重要，因为我真的不知道如何使用 React 做到这一点，但仍然值得注意。

将 React 组件渲染到 GoogleMaps InfoBox 中 - 停止点击

相关内容

最新更新

热门标签：