2012-12-19 82 views
1

我使用InfoWindow domready事件处理程序来修改InfoWindow的外观。自定义Google Maps API InfoWindow不工作

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

我改变了一些使用jQuery的信息窗口内的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中,我可以使用,这让我可以修改信息窗口后,它完全绘制以外的任何其他活动。

回答

0

我一条生路......发生什么事是当一个信息窗口添加到地图中,所有的瓦片重新绘制和与它一起的所有信息窗口标记过复位。

于是,我试着用

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

它使我的变化,但我遇到一个不同的问题来了。

一旦有事情发生在地图上,像拖拽,缩放等,我将不得不守旗每个标记和执行这只是如果正在加载的标记这将被调用。

反正是有等待两个事件一起发生的呢?

更新:

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

如果我在同一坐标增加一个标记,瓷砖,不会重新加载,并且不会产生tilesloaded事件。

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

更新2

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

所以,我检查div的高度,当我得到tilesloaded情况下,如果它已经被重置,然后我再设置高度...

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