Google Maps InfoWindow - 防止 html 模板显示在页面上

Question

我正在开展一个个人项目，该项目将在几页上显示 Google 地图。我只创建了一个示例演示页面，我被困在一些看起来很简单但我无法解决的问题上（前端开发人员不多）

我的地图有一个 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;
}

在标记的点击事件上，我设置了infoWindow的内容：

    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 。我现在不想使用任何像 bootstrap 这样的 css 框架，因为这是一个非常基本的演示。

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

Answer 1

你可以在变量中设置内容和html，无需从页面中拉取：

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

JSFIDDLE

更新

我不会认为这是不好的做法。您可以在变量中对其进行硬编码，或者在页面底部对其进行硬编码。如果您在页面底部执行此操作，不仅您添加的代码实际上除了要复制之外什么都不做，而且您必须交换所有变量。它添加了几个额外的不必要的代码步骤。但这取决于你。如果你想要它的方式，只需在 .infowindow2 上设置 display: none 并调用：

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

而不是outerHTML

NEW FIDDLE

它做同样的事情，但你的文字正好适合这个盒子。为了在.info-box 上保留您想要的样式，我会将其包装在div 中，并在其中添加display: none。然后抓住那个里面的html。新小提琴：

THIRD TIME IS A CHARM