时间戳

首页 > 解决方案 > 使用javascript和JSTL在Google地图上单击标记时如何显示相应的信息窗口

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

问题描述

我正面临使用 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>

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

标签： javascriptjavagoogle-mapsjstlgoogle-maps-markers

解决方案

您不能像这样将 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>

推荐阅读