Google地图信息窗口 - 防止HTML模板显示在页面上

我正在开发一个个人项目，它将在几页上显示Google地图。我创建的只是一个示例演示页面，我坚持的东西似乎很简单，但我无法绕过它（没有太多的前端开发人员）Google地图信息窗口 - 防止HTML模板显示在页面上

我有一个Html页面与我的地图。在底部，我创建了一个“模板”，它将用作infoWindow内容的容器。

<div class="infowindow2"> 
    <h3>Point Information</h3> 
    <h4>Id {id} </h4> 
    <h4>Update date: {update}</h4> 
</div>

我对infowindow2类以下CSS样式：

.infowindow2{ 
    width:250px; 
    height:130px; 
    overflow:hidden; 
}

上的标记的单击事件，我设置的信息窗口的内容：

function addMarkerClick(marker){ 

     google.maps.event.addListener(marker, 'click', function() { 

      infoWindow.close();   

      //Retrieve html template 
      var window2 = $('.infowindow2')[0].outerHTML; 

      //Replace template holders with values 
      window2 = window2.replace("{id}", marker.id); 
      window2 = window2.replace("{update}", marker.update); 

      infoWindow.setContent(window2); 
      infoWindow.open(map, marker);   
     });  
    }

降至现在的我题。除了一件事以外，一切工作都很好。窗口的Html模板显示在页面上。我试图隐藏窗口通过CSS设置为none，但是当我点击时，infoWindow是空的（正如所料，html不在页面上）

我在这里丢失了什么？我希望在我的页面上定义html模板，但只能将它用于infoWindow。我现在不想使用任何像引导程序的CSS框架，因为这是一个非常基本的演示。

更新：JSFiddle重现问题：http://jsfiddle.net/joaopgrassi/vtp4fq97/1/ 向下滚动页面以查看正在显示的html模板。

来源

2014-10-12 jpgrassi

你可以在小提琴中重新创建吗？ – jmore009 2014-10-12 14:26:19

当然。用jsfiddle更新了问题。 – jpgrassi 2014-10-12 14:41:46

您可以设置变量的内容和HTML的权利，没有必要从页面拉：

var window2 = '<h3>Point Information</h3>'+ 
    '<h4>Id: '+ marker.id +'</h4>'+ 
    '<h4>Update Date:'+ marker.update +'</h4>';

JSFIDDLE

UPDATE

我不认为不好的做法。您可以在变量中对其进行硬编码，也可以在页面底部对其进行硬编码。如果您在页面底部执行该操作，不仅会添加基本上除了需要复制外无所作为的代码，还必须更换所有变量。它增加了一些不必要代码的额外步骤。但这取决于你。如果你想要的方式，你有它只是设置display: none上.infowindow2，并呼吁：

var window2 = $('.infowindow2').html();

代替outerHTML

NEW FIDDLE

它做同样的事情，但你有文本只是适合框。为了保持你想要的风格.info-box我会将其包装在div并添加到display: none。然后抓住那个里面的html。新小提琴：

THIRD TIME IS A CHARM

来源

2014-10-12 14:52:47 jmore009

是的，我知道。但在我看来，这是一个不好的做法，像这样硬编码html模板。此外，这只是一个非常小的例子，仅用于提问。在真实的情况下，它会更复杂的布局。 – jpgrassi 2014-10-12 14:56:24

@jpgrassi更新了我的答案 – jmore009 2014-10-12 15:03:01

谢谢！我明白你在说什么。当然，页面或变量上的硬编码是一样的。我的观点是，即使它只是坐在那里，而不必连接一个字符串等等，我认为要让html预先定义更“干净”。只有一个问题。我之前使用过.html（），它只返回里面的元素（按照设计）。现在如何工作？这是因为显示：没有？ – jpgrassi 2014-10-12 15:12:48

Google地图信息窗口 - 防止HTML模板显示在页面上

回答

相关问题