JSF PrimeFaces 6.1 p:gmap不使用Google Maps渲染折线

时间:2017-06-20 07:09:01

标签: google-maps jsf primefaces

对于项目要求,我需要使用primefaces 6.1 p:gmap标记渲染折线,但只渲染地图。这是我的XHTML文件:

<?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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <title>Facelet Title</title>
    <script src="https://maps.google.com/maps/api/js?key=SOME_KEY" defer="defer"
            type="text/javascript"></script>
<h:outputScript library="primefaces" name="gmap/gmap.js" />
</h:head>
<h:body>
    <f:view contentType="text/html">
        <h:form id="form1">
            <p:gmap center="36.883707, 30.689216" zoom="15" type="MAP" style="width:900px;height:800px;"
                    model="#{mapBean.model}" id="myMap"/>
        </h:form>
    </f:view>
</h:body>
</html>

这是我的Bean

import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Polyline;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import java.io.Serializable;

@RequestScoped
@ManagedBean(name = "mapBean")
public class MapBean implements Serializable {

    private MapModel model;

    @PostConstruct
    public void MapBean() {
        model = new DefaultMapModel();
        Polyline polyline = new Polyline();
        polyline.getPaths().add(new LatLng(36.879466, 30.667648));
        polyline.getPaths().add(new LatLng(36.883707, 30.689216));
        polyline.getPaths().add(new LatLng(36.879703, 30.706707));
        polyline.getPaths().add(new LatLng(36.885233, 30.702323));

        polyline.setStrokeWeight(8);
        polyline.setStrokeColor("#FF9900");
        polyline.setStrokeOpacity(0.9);

        model.addOverlay(polyline);
    }

    public MapModel getModel() {
        return this.model;
    }
}

添加到MapBean模型的折线不会通过p:gmap属性显示。仅显示地图。我使用Spring Boot 1.2.3运行Mojarra 2.2.11的primefaces 6.1。任何我可能遗失的想法/指针,或者它是p:gmap和折线渲染的真正问题?我还查看了Chrome Javascript控制台,并且没有显示错误。

1 个答案:

答案 0 :(得分:0)

解决。谢谢@Kukeltje的帮助。 似乎当我们使用Spring Framework(我使用SpringBoot 1.2.3来运行这个应用程序)来管理事物时,我们需要使用 @Named 注释来为Bean服务器模型。

以下是我为此工作所做的改变。

XHTML与原始代码帖子保持一致(上图) Bean代码(工作原理如下)

import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Polyline;

import javax.annotation.PostConstruct;
import javax.inject.Named;
import java.io.Serializable;

@Named("mapBean")
public class MapBean implements Serializable {
    public void setModel(MapModel model) {
        this.model = model;
    }

    private MapModel model;

    @PostConstruct
    public void MapBean() {
        model = new DefaultMapModel();
        Polyline polyline = new Polyline();
        polyline.getPaths().add(new LatLng(36.879466, 30.667648));
        polyline.getPaths().add(new LatLng(36.883707, 30.689216));
        polyline.getPaths().add(new LatLng(36.879703, 30.706707));
        polyline.getPaths().add(new LatLng(36.885233, 30.702323));
        polyline.setStrokeWeight(8);
        polyline.setStrokeColor("#FF9900");
        polyline.setStrokeOpacity(0.9);
        model.addOverlay(polyline);
    }
    public MapModel getModel() {
        return this.model;
    }
}

enter image description here