javascript - 如何使用带有 Derby 数据库的jsf在谷歌地图上动态创建多边形?

标签 javascript jquery jsf

如何使用带有 derby 数据库的 jsf 在 google map 上动态创建多边形?此代码适用于静态点,但我在点实体中有动态数据。如何获取这些点并显示在谷歌地图中?

 <html>
      <head>
        <style>
          #map {
            width: 1200px;
            height: 1000px;
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script>
         function initialize() {


          var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lat: 17.68, lng: 83.21},
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

      // Define the LatLng coordinates for the polygon's path.
       var triangleCoords = [
         {lat: 18.3000, lng: 83.900},
         {lat: 18.1713, lng:  82.1278},
         {lat: 17.370, lng: 78.480},
         {lat: 17.68, lng: 83.21},
       ];

      // Construct the polygon.
        var bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35

      });
      bermudaTriangle.setMap(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

最佳答案

您应该下载 gmaps4jsf jar 文件并使用它。 GMaps4JSF 将 Google map 与 JSF 集成。您可以创建 java bean 类并通过 JSF 动态调用该值。可以引用这个http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/welcome.xhtml它会帮助你。 或者这里我举一个例子。

JSF代码:

 <m:map id="map" width="1080px" height="350px" partiallyTriggered="true" latitude="#{pointBean.mapLatitude}" longitude="#{pointBean.mapLongitude}" enableScrollWheelZoom="true">
                    <m:polygon id="polygon" lineWidth="2" hexStrokeColor="red" hexFillColor="lightpink">
                        <ui:repeat var="point" value="#{pointBean.points}" varStatus="status" offset="0" step="1" size="#{pointBean.points.size()}">
                            <m:point latitude="#{point.latitude.toString()}" longitude="#{point.longitude.toString()}">
                            </m:point>
                        </ui:repeat>
                    </m:polygon>
                </m:map>

pointBean类:(java bean类)

private List<Point> points;
private Float mapLatitude;
private Float mapLongitude;//create getter or setter also

public List<Point> getlatlong() {

        String query = ".....";//write here your query
        points = new ArrayList<Point>();
        Point point = null;
        ResultSet rs = null;
        try {
            connection = ConnectionFactory.getConnection();//here is connection for jdbc connectivity
            statement = connection.createStatement();
            rs = statement.executeQuery(query);
            while (rs.next()) {
                point = new Point();
                point.setLatitude(rs.getFloat("latitude"));
                point.setLongitude(rs.getFloat("longitude"));
                points.add(point);
            }
            mapLatitude = points.get(0).getLatitude();
             mapLongitude = points.get(0).getLongitude();

        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
        finally
        {
            DBUtil.close(rs);
            DBUtil.close(statement);
            DBUtil.close(connection);
        }
           return points;
       }
public List<Point> getPoints() {
        return points;
    }

关于javascript - 如何使用带有 Derby 数据库的jsf在谷歌地图上动态创建多边形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32761640/

相关文章:

knockout.js - 如何将 Javascript 模块模式与 Knockout JS 和 Pager JS 结合使用?

javascript - 如何将所有相关的 javascript 获取到 html 元素

java - 当 JSF/Spring 中的 session 超时时重定向到登录或当 session 停用(或给定时间空闲)时自动注销

jsf - WELD-001408 : Unsatisfied dependencies for type Customer with qualifiers @Default

javascript - jquery 未捕获语法错误 : Unexpected token -

javascript - 连接 javascript 文件会阻止单个文件缓存吗?

javascript - 如何将第一列位置固定在表格上?

jquery - 在外部单击时隐藏按钮

javascript - 如何根据下拉列表显示 id?

java - CDI Producer 导致 stackoverflow