0

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

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

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

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

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

在此处输入图像描述

4

1 回答 1

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，但我认为我仍然应该发布解决方案。

于 2013-02-26T23:50:50.320 回答