Question

我正在使用Primefaces gmap在某些标记上显示标记和圆形叠加。我想在点击按钮时切换圆形覆盖。知道我怎么能这样做吗？我使用的是JSF 2.2和Primefaces 3.4.2。

这就是我在jsf页面中加载地图的方式。

<p:gmap center="21, 78" id="map" 
zoom="2" 
type="roadmap"
style="width:99%;height:90%;position:absolute"
model="#{SCNBean.supplyChainMapModel}"
widgetVar="mapVar">

这是我在我的支持bean中加载标记和圆形叠加层的方法。

@PostConstruct
public void viewSupplyChainNetwork(){
    for (Node node : supplyChainNodes) {
        LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
        marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
        supplyChainMapModel.addOverlay(marker);
        //adding circle overlay
        Circle circle1 = new Circle(coord, riskval*10000);  
        circle1.setStrokeColor("#d93c3c");  
        circle1.setFillColor("#d93c3c");  
        circle1.setFillOpacity(0.7);
        supplyChainMapModel.addOverlay(circle1);
    }

以下是使用javascript

创建地图上的按钮的方法

function HeatMapControl(heatMapControlDiv, gmap) {
    heatMapControlDiv.style.padding = '5px';                                        
    var controlUI = document.createElement('div');
    controlUI.title = 'Heat Map';
    heatMapControlDiv.appendChild(controlUI);
    var controlText = document.createElement('div');
    controlText.innerHTML = '<strong>Heat Map</strong>';
    controlUI.appendChild(controlText);
    google.maps.event.addDomListener(controlUI, 'click', function() {
                                        heatmap.setMap(heatmap.getMap() ? null : gmap);
                                    });

我想在点击地图上的按钮时切换圆圈。我怎样才能做到这一点？

Answer 1

我会将mapModel移动到requestScoped Bean，让我们称之为SomeRequestScopedMapBean

它应该将您当前的bean引用为ManagedProperty

你的xhtml可以这样工作:(我认为没有必要用javascript创建它，但我用commandButton编写它）

    <p:gmap
    model="#{someRequestScopedMapBean.supplyChainMapModel}"
    widgetVar="mapVar"
    id="pgmapId">

<p:commandButton value="Toggle Circles"
    actionListener="#{sCNBean.toggleShowCircles}"
    ajax="true"
    update="pgmapId"
    />

这是您的viewScoped Backing bean中的操作回调

    public void toggleShowCircles(){
    if(showCircles)
        showCircles = false;
    else 
        showCircles = true;
}

MapModel构造被移动到SomeRequestScopedMapBean

@PostConstruct
public void drawMapModel(){
for (Node node : sCNBean.supplyChainNodes) {
    LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
    marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
    supplyChainMapModel.addOverlay(marker);

    if(sCNBean.showCircles){
        //adding circle overlay
        Circle circle1 = new Circle(coord, riskval*10000);  
        circle1.setStrokeColor("#d93c3c");  
        circle1.setFillColor("#d93c3c");  
        circle1.setFillOpacity(0.7);
        supplyChainMapModel.addOverlay(circle1);
    }
}

在Primefaces GoogleMap中切换叠加层

1 个答案: