如何在p:gmap中使用gestureHandling属性?

时间:2017-10-02 14:17:18

标签: google-maps jsf primefaces

此代码显示谷歌地图,其中显示每个指针的一些事件信息。当许多事件在地图中显示时,需要放大。当我放大然后需要按ctrl +鼠标滚动。但我只想要鼠标滚动。我尝试使用gestureHandling:'贪心'

<p:gmap gestureHandling: "greedy"></p:gmap>

但不适合我

这是我使用primefaces gmap

的xhtml页面
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">

            <ui:define name="title"><title>Incident Map-BD</title></ui:define>
        <ui:define name="content">

            <div class="ui-g-12 ui-lg-12">
                <h:form id="frmGoogleMapBd">
                <p:outputLabel value="#{googleMapControllerBd.initCall}"/>    
                    <p:growl id="growl" life="3000" />
                    <p:gmap id="gmap" center="#
    {googleMapControllerBd.mapCenter}" zoom="7" type="ROADMAP" model="#
    {googleMapControllerBd.advancedModel}" style="width:100%;height:650px">
                        <p:ajax event="overlaySelect" listener="#
    {googleMapControllerBd.onOverlayClick}" update="infoWindow-bd" />
                        <p:gmapInfoWindow id="infoWindow-bd" style="text-align: 
    center; display: block; margin: auto">
                            <!-- <p:panelGrid columns="1" style="width: 100%" 
    columnClasses="forty-percent top-alignment, sixty-percent top-alignment"> --
    >
                               <p:panelGrid columns="1" styleClass="ui-noborder" 
    style="width: 100%" columnClasses="top-alignment"> 
                               <!-- <p:graphicImage 
    name="images/wepon_type_IED3.jpg"  library="omega-layout" style="margin-right: 
    5px;"/> -->

                                <p:panelGrid  columns="3" styleClass="ui-
    noborder" style="width: 100%" columnClasses="top-alignment">
                                        <p:graphicImage name="images/#
    {googleMapControllerBd.pointerIncident.imageList.get(0)}"  library="omega-
    layout" style="margin-right: 5px;"/> 
                                        <p:graphicImage name="images/#
    {googleMapControllerBd.pointerIncident.imageList.get(1)}"  library="omega-
    layout" style="margin-right: 5px;"/> 
                                        <p:graphicImage name="images/#
    {googleMapControllerBd.pointerIncident.imageList.get(2)}"  library="omega-
    layout" style="margin-right: 5px;"/>  
                                    </p:panelGrid>

                                   <p:outputLabel  value="#
    {googleMapControllerBd.pointerIncident.mapInfoLine1}" style="width: 100%">
                                </p:outputLabel>

                                   <p:outputLabel  value="IED Type : #
    {googleMapControllerBd.pointerIncident.mapInfoLine2}" style="width: 100%">
                                </p:outputLabel>

                                   <p:outputLabel  value="Explosive Type : #
    {googleMapControllerBd.pointerIncident.mapInfoLine3}" style="width: 100%">
                                </p:outputLabel>

                            </p:panelGrid>
                        </p:gmapInfoWindow>
                        </p:gmap>    

                </h:form>    
            </div>
        </ui:define>
    </ui:composition> 

这是我的Java类

package com.softcafe.controller;

import java.io.Serializable;
import java.util.LinkedList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.event.map.OverlaySelectEvent;
import org.primefaces.model.map.Circle;
import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Marker;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.delfian.core.message.interfaces.Message;
import com.softcafe.core.enums.Country;
import com.softcafe.enums.ActionType;
import com.softcafe.enums.ContentType;
import com.softcafe.model.Incident;
import com.softcafe.util.BaseGoogleMap;
import com.softcafe.util.IncidentUtils;

@ManagedBean(name = "googleMapControllerBd")
@ViewScoped
public class GoogleMapControllerBD extends BaseGoogleMap implements  
Serializable {

    private static final long serialVersionUID = 1852939849786564610L;
    private static final Logger log = 
LoggerFactory.getLogger(GoogleMapControllerBD.class);

    private Incident pointerIncident;
    private Incident incident;
    private String initCall;
    private String buildMali;
    DefaultMapModel advancedModel = new DefaultMapModel();
    private Marker marker;
    Circle circle;
    private static final int circleMultiply = 1500;
    private static final float fillOpacity = 0.2F;
    public static String countryName;
    public static String divisionName;
    public static String districtName;

    public void setCountryDivisionDistrictAndThana() {
        incident.setCountry(countryName);
        incident.setDivision(divisionName);
        incident.setDistrict(districtName);
    }

    private List<Incident> incidentList = new LinkedList<>();
    private List<Incident> incidentListAll = new LinkedList<>();

    public GoogleMapControllerBD() {
        super();
        mapCenter = mapCenterBD;
        if(null == incident){
            this.incident  = new Incident();
        }   
    }

    // this method responsible for build all map
    public String getInitCall() {
        incident.setCountry(Country.Bangladesh.toString());
        buildMap();
        return initCall;
    }

    public String getBuildMali() {
        incident.setCountry(Country.Mali.toString());
        buildMap();
        return buildMali;
    }

    public void buildMap() {

        try {
            setCountryDivisionDistrictAndThana();
            Message<List<Incident>> message = 
execute(ActionType.ACTION_SELECT,
                    ContentType.INCIDENT, 
IncidentUtils.validateSearchValue(incident));
            //incidentList = message.getPayload().get(0).getIncidentList();

incidentListAll=message.getPayload().get(0).getIncidentListAll();

            advancedModel = new DefaultMapModel();

            //plotIncident(incidentList, advancedModel);
            plotIncident(incidentListAll, advancedModel);

        } catch (Exception e) {
            e.printStackTrace();
            log.error("start error: ", e);
        }
    }

    // overlay may Circle or Marker
    public void onOverlayClick(OverlaySelectEvent event) {

        if (event.getOverlay() instanceof Circle) {
            circle = (Circle) event.getOverlay();
        } else if (event.getOverlay() instanceof Marker) {
            marker = (Marker) event.getOverlay();
        }

    }

    public Marker getMarker() {
        return marker;
    }

    public Circle getCircle() {
        return circle;
    }

    public Incident getIncident() {
        if (null == incident) {
            incident = new Incident();
        }
        return incident;
    }

    public void setIncident(Incident incident) {
        this.incident = incident;
    }

    public String getCountryName() {
        return countryName;
    }

    public void setCountryName(String countryName) {
        this.countryName = countryName;
    }

    public String getDivisionName() {
        return divisionName;
    }

    public void setDivisionName(String divisionName) {
        this.divisionName = divisionName;
    }

    public String getDistrictName() {
        return districtName;
    }

    public void setDistrictName(String districtName) {
        this.districtName = districtName;
    }
    public MapModel getAdvancedModel() {
        return advancedModel;
    }
    public Incident getPointerIncident() {
        pointerIncident = (Incident) marker.getData();
        return pointerIncident;
    }

}

1 个答案:

答案 0 :(得分:1)

只需合并Center to the current position in a Primefaces gmap

中答案的第二段
PF('mapWidgetVar').getMap();

仅来自page 239 in the PrimeFaces documentation返回the GMap JavaScript Map object以及来自3.25 api update answerChange Google Maps v3 mapOptions object after load的评论

map.setOptions({gestureHandling: 'greedy'});

PF('geoMap').getMap().setOptions({gestureHandling: 'greedy'});

将上述行复制/粘贴到PrimeFaces Maps showcase上的开发者控制台中以查看其是否正常工作

另见: