javascript - 自定义 Google Maps API InfoWindow 不工作

Question

我正在使用 InfoWindow domready 事件处理程序来修改 InfoWindow 的外观。

google.maps.event.addListener(popup, 'domready', function() {

我正在使用 jquery 更改 InfoWindow 的一些内部 div 的高度。

问题是高度变化并立即重置回默认大小。此外，事件处理程序被调用两次。

并不是所有的 div 都会重置它们的大小，只有一些会。

我的部分代码:

popup = new google.maps.InfoWindow({
    content:'<image id="pin_' + pin_count + '" src="question.png"/>'
});

// Parent.Parent.Parent
e = $('#pin_' + pin_count).parent().parent().parent();
console.log(e.height());
h = parseFloat(e.height());
e.css({
    'position' : 'absolute',
    'top' : '-100px',
    'height' : (h + 100) + 'px',
    'border-radius' : '16px 16px 16px 16px',
    'border' : '2px solid red',
});
console.log(e.height());
console.log("...");

除了 domready 之外，还有其他事件可以让我在完全绘制后修改 InfoWindow 吗？

Answer 1

我找到了一条出路...发生的事情是，每当将 InfoWindow 添加到 Map 时，所有图 block 都会重新绘制，所有 InfoWindow 标记也会随之重置。

所以，我尝试了

google.maps.event.addListener(map, 'tilesloaded', function() {

它保留了我的更改，但我遇到了一个不同的问题。

这将在 map 上发生任何事情时调用，例如拖动、缩放等。我必须为每个标记保留标志，并且只有在加载标记时才执行它。

有没有办法等待两个事件同时发生？

更新:

当我收到 domready 事件时，我设置了一个标志。当我得到下一个 tilesloaded 时，我检查标志并调整我的 InfoWindow 的大小。这是工作。但又是一个问题。

如果我在同一坐标处再添加一个标记，则不会重新加载图 block ，也不会生成 tilesloaded 事件。

还有一个问题，我可以把map中的所有事件放到一个handler中吗？

更新 2

我发现了问题。作为实际 InfoWindow 内容的第三个父级的 div 是唯一大小被重置的元素。

所以，当我收到 tilesloaded 事件时，我正在检查 div 的高度，如果它已被重置，那么我会再次设置高度...

google.maps.event.addListener(map, 'tilesloaded', function() {
    e = $('#pin_' + pin_count).parent().parent().parent();
    // default height is saved before the div is resized in domready event handler
    if (e.css("height") < default_height) {
        h = parseFloat(e.height());
        e.css({
            'height' : (h + 100) + 'px',
        });
    }
});