使用javascript和JSTL在Google地图上单击标记时如何显示相应的信息窗口

Question

我正面临在 JSP (Taglib) 中使用 JSTL 在 Google 地图上显示标记和 infoWindows 的问题 我有一个侦听器设置以单击标记，将显示相应的信息窗口（附加到标记）。

我的问题是：我点击任何标记它只显示 1 个信息窗口，当我另一个标记时它不能显示相应的标记和信息窗口..

我的脚本：

<script>                                
function initMap() {
    var latLng = {lat:21.027763, lng:105.834160};
    var map = new google.maps.Map(document.getElementById('googleMap'), {
    mapTypeControlOptions: {
        mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
    },
    zoom: 13,
    center: latLng,
    mapTypeId: 'mystyle'
    });
    map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));                                  

    <c:forEach var="item" items="${itemList}">                                                   
        var content = '<div id="div-main-infoWindow">' +
                      '<div id="iw-container">' +
                      '<div class="iw-title">' +
                      '<img src="${pageContext.request.contextPath}/photo/<c:out value="${item.THUMBNAIL_1}"/>" class="imgMarkerLabel">' +
                      '</div>' +
                      '<h2><c:out value='${item.NAME}'/></h2>' +
                      '<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>' +
                      '</div>' +
                      '</div>' +
                      '</div>';                                                   
        var infowindow = new google.maps.InfoWindow({                                           
            content: content, 
            maxWidth: 291
        });

        google.maps.event.addListener(infowindow, 'domready', function () {
            $('#div-main-infoWindow').closest('.gm-style-iw').parent().addClass('custom-iw');
        });

        var marker = new google.maps.Marker({
            position: {lat: <c:out value="${item.LAT}"/>, lng: <c:out value="${item.MAPLONG}"/>},
            map: map
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });                                                                             
    </c:forEach>                                        
}                                   
google.maps.event.addDomListener(window, 'load', initMap);                                
</script>

我希望当我点击任何标记时，该标记将显示相应的信息窗口，并且它会在信息窗口中显示列表的属性 那么，我如何才能访问此侦听器之外的信息窗口？

Answer 1

您不能像这样将 JSTL 与 javascript 混合使用。 JSTL 在服务器端呈现，这意味着服务器将在运行 javascript 之前运行该代码。 Javascript 在客户端呈现。

您可以通过以下方式自行测试：

<button onclick="doTest();">Test</button>

<script>

function doTest() {
//this should only run when we click on the button right?
<c:set var="testMe" value="Wrong." scope="session"  />

}     

</script>

<p>There should be no text below until we click the button right?</p>
<h1><c:out value="${testMe}"/></h1>

因此，您需要重新审视您的代码，牢记这一点，您的 javascript 中的任何 jstl 都将首先运行。这就是为什么它只会显示一个信息窗口。

您需要做的就是将您的 ${itemList} 传递给隐藏的输入。

<input type="hidden" value="${itemList}" id="getItemList"> 

然后在 javascript 中，您可以访问它并使用 javascript 而不是 jstl 创建循环。尽管您需要先将对象转换为字符串或 json 字符串才能在 javascript 中使用它。

你可以在你的 java 中使用这样的东西：

String someObjectAsJson = new Gson().toJson(itemList);
request.setAttribute("someObjectAsJson", someObjectAsJson);

那么在js中（代替输入法）：

<script>var foo = ${someObjectAsJson};</script>

注意：上面 javascript 中的 EL 有效，因为输出在语法上是有效的。如果你没有在你的java中首先将它变成一个字符串，你需要这样做：

<script>var foo = '${foo}';</script>