如何减少wicket-stuff gmap3库中的信息窗口大小？

Question

我写的页面显示了二手商品的卖家。地图上有许多简短的信息元素，包括价格，物品状态和卖家的可用时间。我想减少信息窗口的可用空间，以便更多它们适合屏幕。我尝试6.5.0 wicket-stuff gmap3中的新功能 - “信息窗口内的面板”，但没有运气 - 图片显示了css的结果：

border : 1px solid black ;
margin : 0;
padding : 0;

如何最小化info winfo窗口的可用空间并使其适合内容？

P.S。如果我可以用指针制作可点击的数字组，那将是最好的。但信息窗口不可点击，因此有标记。想法 - 用户首先根据信息窗口中显示的主要属性进行育雏选择，然后单击他的选择并在页面上的其他位置显示完整信息。

P.P.S。嗯，我现在还有一个想法 - 我不需要带状态的数字。我只能用不同的颜色绘制信息（绿色=“像新的”，蓝色=“用得很辛苦，但工作”，红色=“垃圾”）:)。

Answer 1

快速而肮脏

var infowindow = new google.maps.InfoWindow({
  content: '<div id="iw_content"><a href="/" style="color:#f00">3434</a> <a href="/" style="color:#00f">4</a> <a href="/" style="color:#0f0">18-9</a></div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('iw_content');
  //* Get and set a class for the main content containers container
  el = el.parentNode.parentNode;
  el.setAttribute('class','iw_content_container_container');
  //* Get and set a class for the div containing the close window image
  closeEl = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  closeEl.setAttribute('class','closeInfoWindow');
  //* Get and set a class for the div containing the close and main content
  el = el.parentNode;
  el.setAttribute('class','closeInfoWindowContainer');
  //* Get and hide the troublesome background
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.style.display = "none";
  //* Get and hide the top image of the arrow
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.style.display = 'none';
  //* Get and hide the shadow (hiding commented out for now as not strictly requested)
  el = el.parentNode.parentNode;
  el = (el.previousElementSibling)?el.previousElementSibling.previousElementSibling:el.previousSibling.previousSibling;
  //el.style.display = 'none';
});

这可能会让你在代码中加入一些钩子，然后用css

来解决

#iw_content{background:#fff}
.iw_content_container_container{height:auto!important;text-align:center}
.closeInfoWindow {top:22px!important;right:22px!important}
.closeInfoWindowContainer{position:absolute;top:52px;height:auto!important}

您可能想要了解.closeInfoWindowContainer顶部值，因为这取决于文本量。基本上只测试了你的那一行。

我尝试在代码本身中删除宽度和高度（因此在javascript中添加/更改）但是地图有一个令人讨厌的习惯，即根据加载时光标的状态和位置将它们重新放回。

...

信息Windows是可点击的。它们只是页面中的普通div元素，可以这样处理。我已在您的示例超链接中创建了各种值来显示此内容。

很抱歉这不是wicketstuff，但我认为我仍然应该发布一个解决方案。