自定义Google Maps API InfoWindow无法正常工作

问题描述

我使用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之后完全绘制？

解决方案

我找到了一条出路......每当InfoWindow添加到Map中时，瓷砖重新绘制，随着它所有的InfoWindow标记也重置。

所以，我试着用

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

只要地图上发生任何事情，就会调用它，例如拖动，缩放等等。我将不得不为每个标记保留标记，并且只有当标记被加载时才执行此操作。

有没有办法等待两个事件一起发生？ ： p>当我得到 domready 时，我检查标志并调整InfoWindow的大小。这是工作。但再次出现问题。

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

还有一个问题，我可以将地图中的所有事件都变为单个处理程序吗？

更新2

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

所以，我在检查div加载事件时的高度，如果它已被重置，那么我再次设置高度...

  google.maps.event.addListener（map， 'tilesloaded'，function（）{
e = $（'＃pin_'+ pin_count）.parent（）。parent（）。parent（）; 
 //在div被调整大小之前保存默认高度在domready事件处理程序中
 if（e.css（height）< default_height）{
h = parseFloat（e.height（））; 
 e.css（{
 '高度'：（h + 100）+'px'，
}）; 
} 
}）; 
  

I am using the InfoWindow domready event handler to modify the look and feel of the InfoWindow.

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

I am changing the height of some of the inner divs of the InfoWindow using jquery.

The problem is the height changes and immediately resets back to default size. Also, the event handler is called twice.

Not all of the divs reset their size, only some do.

Part of my code:

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("...");

Is there any other events other than domready I can use, which lets me modify the InfoWindow after it is fully drawn?

解决方案

I got a way out... what is happening is whenever a InfoWindow is added to a Map, all the tiles are redrawn and along with it all the InfoWindow markers are reset too.

So, I tried with

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

It keeps my changes, but I came across a different issue.

This will be invoked whenever anything happens on the map, like drag, zoom etc. I will have to keep flags for each marker and execute this only if the marker is being loaded.

Is there anyway to wait for two events to happen together?

Update:

I am setting a flag when I get domready event. When I get the next tilesloaded, I check for the flag and resize my InfoWindow. It is working. But again an issue.

If I add one more marker at the same coordinates, tiles are not reloaded and tilesloaded event is not generated.

One more question, can I get all the events in the map into a single handler?

Update 2

I found the issue. The div which is the third parent of the actual InfoWindow content is the only element whose size is reset.

So, I am checking the height of div when I get tilesloaded event, if it has been reset, then I set the height again...

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',
        });
    }
});

这篇关于自定义Google Maps API InfoWindow无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！