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

【问题标题】：How to reduce info window size in wicket-stuff gmap3 library?如何减小 wicket-stuff gmap3 库中的信息窗口大小？
【发布时间】：2013-02-25 17:05:44
【问题描述】：

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

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

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

附：如果我可以用指针制作可点击的数字组，那将是最好的。但是信息窗口不可点击，所以有标记。想法 - 用户首先根据信息窗口中显示的主要属性做出选择，然后单击他的选择并完成页面其他位置显示的信息。

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

【问题讨论】：

标签： google-maps wicket wicketstuff

【解决方案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 中添加/更改），但地图有一个烦人的习惯，即根据加载时光标的状态和位置将它们重新放回。

...

信息窗口是可点击的。它们只是页面中的普通 div 元素，可以这样对待。我在您的示例超链接中设置了各种值来显示这一点。

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

【讨论】：

非常感谢！我会尝试采用这个解决方案。