Question

我想做什么，在信息窗口添加[阅读更多]的简短数据。当用户点击[Read More]时，将显示完整数据。无法找到任何关于如何在融合表/层上执行此操作的文档，是否可以使用fusion？

为了更好地理解

正常信息窗口显示 -

    {name}
    {address}

..[Read More]

如果用户点击[阅读更多]

{name}
{address}
{mobile}
{email}
{facebook}
{description}

如果可能在融合表/层上，请分享指南/文档。

Answer 1

可能的解决方案：

创建一个这样的infowindow模板：

<div class='googft-info-window'>
 {name}<br>
 {address}<br>
 <span class="readmore">[...Read More]</span>
 <div class="more">
  {name}<br>
  {address}<br>
  {mobile}<br>
  {email}<br>
  {facebook}<br>
  {description}<br>
 </div>
</div>

infowindow现在将有2个具有特定类的元素：

```
<div class="more">
```
此元素包含最初应隐藏的元素，通过CSS隐藏它：
```
.gm-style-iw .more{
  display:none;
}
```
<span class="readmore">[...Read More]</span>

您无法在infoWindow模板中为此元素指定事件处理程序，请观察文档中的单击：
```
google.maps.event.addDomListener(document, 'click', function(e){
  if(e.target.className==='readmore'){
    //do something
  }
});
```

如何应用所需的功能：

观察图层上的点击：

 google.maps.event.addListener(layer,'click',function(e,showMore){

    //when the event has been triggered by a real click on the layer
    //the  showMore-argument is undefined
    //store the event-data as properties of the  layer 
    //because we need this data to trigger the click programmatically
    if(!showMore){
      //the complete event-data
      this.eventData=e;
      //store  the unmodified infowWindowHtml separate, because we will modify it
      this.infoWindowHtml=e.infoWindowHtml;
    }
     //wrap the contents in  another div
     //when showMore is defined assign a particular class to the wrapper
     e.infoWindowHtml='<div'+
                      ((showMore)?' class="showmore" ':'')+'>'+
                      this.infoWindowHtml+
                      '</div>';

 });

触发上面提到的处理程序中的图层上的单击并传递2个参数：

原始活动

true（这将是showMore - 变量）

google.maps.event.addDomListener(document, 'click', function(e){
 if(e.target.className==='readmore'){
  google.maps.event.trigger(layer,'click',layer.eventData,true)
 }
});

infoWindow将立即再次打开（无需再次请求数据），但需要重新打开，因为API必须重新计算infoWindow的大小。

使用CSS：

....显示最初隐藏的内容：

.gm-style-iw .showmore .more{
  display:block;
}

...隐藏了解更多 -span：

.gm-style-iw .showmore .readmore{
  display:none;
}

演示：http://jsfiddle.net/doktormolle/pmrzytfL/

在Fusion桌上点击信息窗口的新窗口？

1 个答案: