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

Question

我正在开展一个个人元素，该元素将在几个页面上显示 Google map 。我正在创建一个示例演示页面，我被困在一些看起来很简单但我无法绕过它的东西上(不是很多前端开发人员)

我的 map 有一个 Html 页面。在底部，我创建了一个"template"，它将用作 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 将显示设置为无来隐藏窗口，但是当我单击时，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。新 fiddle :

THIRD TIME IS A CHARM