Question

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

我的问题是：我单击任何仅显示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>

当使用JavaScript和JSTL在Google地图上单击标记时，如何显示相应的infoWindow

1 个答案: