JSF中的Google地图无法正常工作

Question

I have to show markers in google map using JSF and javascript.but i don't know the problem. 我必须使用JSF和javascript在google map中显示标记，但我不知道问题所在。 Same code is working well in jsp but not working well in jsf even map not showing map on page. 相同的代码在jsp中效果很好，但在jsf中效果不佳，甚至地图未在页面上显示地图。 Code for JSF page is given as follows: JSF页面的代码如下：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
        <title>Google Maps Multiple Markers</title> 
        <script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
    </head> 
    <body>
        <div id="map" style="width: 500px; height: 400px;"></div>
        <script type="text/javascript">
           // <![CDATA[
            alert("hello");
            var locations = [
                   <ui:repeat value = "#{loadBean.googleMapLocations}" var = "googleLocation"  varStatus = "status" >
                    ['#{googleLocation.location}', '#{googleLocation.latitude}', '#{googleLocation.longitude}']
                    < c:if test = "${!status.last}" >
                    ,
                    < /c:if>
                    < /ui:repeat>
            ]
                    alert(locations);
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng("${loadBean.centerLatitude}", "${loadBean.centerLongitude}"),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
           function saveForm(){
                alert("helo world");
            }
             ]]>
        </script>
        <table>
            <c:forEach var="googleLocation" items="${loadBean.googleMapLocations}">
                <tr><td>${googleLocation.latitude}</td><td>${googleLocation.longitude}</td></tr>  
            </c:forEach>
            CENTER<tr><td>${loadBean.centerLatitude}</td><td>${loadBean.centerLongitude}</td></tr>
        </table>
        <f:view>
        <h:form>
        <p:commandButton type="button" onclick="return saveForm();" value="Button" /></h:form></f:view>
    </body>
</html>

Answer 1

尝试使用ui repeat代替forEach。

JSF中的Google地图无法正常工作

问题描述

1 个解决方案

解决方案1
0 2014-12-03 15:26:44

JSF中的Google地图无法正常工作

问题描述

1 个解决方案

解决方案1 0 2014-12-03 15:26:44

解决方案1
0 2014-12-03 15:26:44