个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在 React 应用程序中遇到 google maps InfoBox 的问题。我的目标是在谷歌地图实例上打开一个空的 InfoBox，然后使用 ReactDOM.render 将我的组件放入其中。该组件由一组选项卡组成，每个选项卡 Pane 在打开时通过 redux 和 thunk 进行 API 调用。
一切正常，显示效果很好。问题来自实际单击信息框。我可以通过将 enableEventPropagation 更改为 true 或 false 来使其以两种方式之一工作:
enableEventPropagation = true:该组件工作，所有选项卡和按钮，但如果我碰巧单击信息框的右侧部分，我的信息框下方的任何标记都将打开，这完全打破了状态和流程我的申请。
enableEventPropagation = false:点击不会传递到 map ，但 React 组件中的所有点击事件都不起作用。没有选项卡，没有按钮:什么都没有。看起来不错，但根本不起作用。
这是我创建信息框并使用 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" />
);
}
我尝试了以下解决方案:
切换到 GoogleMaps OverLay。完全相同的问题，事实上，查看 InfoBox 插件似乎 InfoBox 是 OverLay 的包装器，有助于消除其中一些问题，但仍然假设它只是非交互式的。
在我的组件内的各个点禁用事件传播，但效果是它禁用了向下而不是向上的 DOM 树的事件传播，这意味着子组件不起作用!疯了!
似乎我剩下的唯一选择就是在信息框被渲染后以某种方式计算它的纬度/经度范围，然后依次禁用该区域中的所有标记，但我想避免这是一堆废话!
或者我的方法完全错误？
最佳答案
您可以尝试一些事情。
首先，如果你没有很多标记，你绝对可以尝试设置你的标记optimized标记为 false。它会将它们呈现为单独的 DOM 元素，从而降低性能，但您不会像您遇到的那样出现奇怪的行为。
我无法使用普通标记重现您的问题，但可以使用默认添加的 POI 重现。为防止打开 InfoBox 后面的任何标记，您可以在 InfoBox 上的 enter 和 leave 上创建一个监听器，它将设置一个 bool 值，并覆盖 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&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>我还在一些地方看到人们遇到了同样的问题，不得不等待 InfoBox domready 事件开始绑定(bind)他们的点击。不要真的认为这是相关的，因为我真的不知道如何使用 React 做到这一点，但仍然值得注意。
关于javascript - 将 React 组件渲染到 GoogleMaps InfoBox - 停止点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43807586/
24
4
0
我正在使用 Tkinter 在 python 上写一个小游戏(顺便说一下，我不允许使用任何其他非内置模块)并且我想在主窗口上播放背景歌曲，这是那个包含标题，以及转到其他窗口和内容的按钮... 所以问题
我有一个 Azure WebJob，它在一个非常简单的应用服务标准:1 Small(计划)上运行。 现在，我的 WebJob(有 5 个函数正在运行)出现问题 - 我想停止 5 个正在运行的函数中的
我在 MacOS Lion 上使用 XCode 4.2。在模拟器中调试 iPhone/iPad 应用程序时，我使用 XCode 工具栏上的“停止”按钮(产品 | 停止)退出应用程序。在此之后，XCod
我刚刚下载了android开放源代码项目，并尝试使用make来构建它，我收到了以下消息: build/core/prebuilt.mk:91: *** recipe commences before
我以前从未制作过 makefile，但我们已经收到了这个，但是，如果我尝试运行它，它只会说， missing separator. stop. 我不知道可能出了什么问题 - 我已经确保空格只按制表符。
好吧，这段代码非常基本。用户将答案输入文本框，如果等于“第一+第二”，他们就得到一分。然后，他们有 5 秒钟的时间回答下一个数学问题。如果他们这样做了，函数“doCalculation”将再次运行，他
我在 viewController 中有一个循环动画 - (void)moveAnimating { [UIView animateWithDuration:2.0f animations:^
当我有一个待处理的 ASIFormDataRequest(作为异步任务启动)仍在执行并且用户按下后退按钮(为了弹出 View )时，我的 viewController 出现问题。 有什么方法可以停止该
我们正在使用 flashdevelop 和 flash CS 3 开发基于 flash 的游戏。我们正在使用 flash CS3 发布 swc，swc 将作为库在 flashdevlop 中使用。 一
我在线程中有一个连接，因此我将其添加到运行循环中以获取所有数据: [[NSRunLoop currentRunLoop] run]; [connection scheduleInRunLoop
你好，我做了一个 php 套接字服务器来从 plc 获取数据，plc 被配置为 tcp 套接字客户端。 我有一个严重的问题，如果本地网络出现故障，似乎功能 socket_accept 停止，plc 无
这个问题已经有答案了: How to stop a setTimeout loop? (10 个回答) 已关闭 8 年前。 请帮助获得正确的函数或方法来停止 setTimeout 函数。 我一直在尝试
我正在运行一个多项目SBT(v0.13)构建，并且希望它在子项目中遇到的第一个错误(编译)时快速失败(停止)。 当前的行为是，当某项无法在子项目中进行编译时，构建将继续(以编译所有其他子项目)。 一旦
我有播放.wav文件中声音的代码，但是我无法停止播放歌曲，甚至无法退出程序直到播放结束。因为这是一首5分钟的歌曲，所以这是一个问题。这是我如何播放wav的代码: public class EasySo
我正在寻找一种解决方案，该如何控制从JSF应用程序播放音频文件。 我不需要完整的解决方案，只需引用我可以用来控制播放音频文件(开始/停止/更改声音)的组件即可。 我尝试搜索过去的问题，但没有成功。 我
我已经在test.ps1中编写了以下函数，在运行该脚本以启动/停止/ ..时我想做一个选择: function getState($SeviceName) { $server = @('hos
我必须设置一个 10 分钟的计时器，它会重定向到主屏幕。此外，它必须在每个操作(例如按下按钮)时重置。我找到了这个计时器:https://github.com/fengyuanchen/vue-cou
我正在制作一个聊天应用程序，功能之一就是发送声音。发送的HTML如下: LOL Stop Play 第一次发送时，“自动播放”效果很好。因此，现在我
我基本上希望页面能够接受用户输入的时间(以秒为单位)。 之后我希望当用户按下“开始”按钮时开始倒计时按下暂停按钮时“暂停”。还有一个重置按钮，以便用户可以从头开始倒计时。 这是我到目前为止得到的:
我需要停止 $.each 循环，加载图像，然后继续循环。我有 Canvas ，可以在其中加载对象图像。对象以正确的顺序排列在数组中。现在，当我尝试从数组加载对象时，存在一个问题:由于尺寸不同，并且它们
我是一名优秀的程序员,十分优秀！