Как отобразить соответствующее информационное окно при нажатии на маркер на карте Google с использованием JavaScript и JSTL - PullRequest
Новая
       14

Как отобразить соответствующее информационное окно при нажатии на маркер на карте Google с использованием JavaScript и JSTL

0 голосов
/ 29 октября 2018

Я сталкиваюсь с проблемой отображения маркеров и информационных окон на карте Google с использованием JSTL в JSP (Taglib) У меня настроен прослушиватель, чтобы щелкнуть маркер, появится соответствующее информационное окно (прикрепленное к маркеру).

Моя проблема: я нажимаю на любой маркер, который показывает только одно информационное окно, когда я другой маркер, он не может отобразить соответствующий маркер и информационное окно.

мой сценарий: 

<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>

Я хочу, чтобы при нажатии на любой маркер этот маркер отображал соответствующее информационное окно и отображал свойство списка в информационном окне. Итак, как я могу получить доступ к информационным окнам за пределами этого слушателя?

1 Ответ

0 голосов
/ 29 октября 2018

Вы не можете смешивать 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>

Так что вам нужно пересмотреть свой код, помня об этом, что любой jstl, который есть в вашем javascript, будет запускаться первым. Вот почему он покажет только одно информационное окно.

Чтобы это работало, нужно передать ваш $ {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>

Примечание: EL в приведенном выше javascript работает, потому что вывод синтаксически допустим. Если вы не делаете строку первой в Java, вам нужно сделать это так: 

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