如何裁剪<p:gmap>的一部分?

时间:2016-04-21 09:54:14

标签: google-maps jsf primefaces crop

我有<p:gmap>个特定标记。我想裁剪<p:gmap>的一部分。我无法使用<p:imageCropper>,因为它会裁剪图像,而不是谷歌地图。如何捕获Google地图的特定部分?

这是我的地图bean:

@ManagedBean
@ViewScoped
public class InfoWindowView implements Serializable {

    private static final long serialVersionUID = 1L;

    @EJB
    GestionAnalyseLocal m;

    private MapModel advancedModel;

    private Marker marker;

    @PostConstruct
    public void init() throws IOException {
        advancedModel = new DefaultMapModel();

        List<Analyse> alys = new ArrayList<Analyse>();
        alys = m.findAll();
        for (int i = 2; i <= alys.size(); i++) {
            Double x = null;
            Double y = null;
            try {
                x = Double.parseDouble(alys.get(i).getLongitude());
                y = Double.parseDouble(alys.get(i).getLatitude());

                LatLng coord1 = new LatLng(y, x);
                if (alys.get(i).getUu_HandoffOk() == 1) {
                    advancedModel.addOverlay(new Marker(coord1, "test", "point.png",
                            "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png  "));
                } else {
                    if (alys.get(i).getUu_OutgoingCallOk() == 1) {
                        advancedModel.addOverlay(new Marker(coord1, "test", "phone",
                                "http://maps.google.com/mapfiles/kml/pal4/icon52.png"));
                    }
                } 
            } catch (Exception e) {
                System.out.println("err");
            }

        }

    }

    public MapModel getAdvancedModel() {
        return advancedModel;
    }

    public void onMarkerSelect(OverlaySelectEvent event) {
        marker = (Marker) event.getOverlay();
    }

    public Marker getMarker() {
        return marker;
    }
}

这是JSF页面:

  <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:jsf="http://xmlns.jcp.org/jsf"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
    xmlns:p="http://primefaces.org/ui">

<h:head>

      <script src="http://maps.google.com/maps/api/js?sensor=true|false" type="text/javascript" ></script>

 </h:head>
<h:body>
 <h:form >
 <h:commandButton action="#{infoWindowView.init()}" value="Generate" />

 </h:form>
 <h:form>
    <p:growl id="growl" showDetail="true" />

    <h:panelGrid columns="2" columnClasses="left,right" style="width:100%">
        <p:chart type="pie" model="#{chartView.pieModel1}" style="width:400px;height:300px">
            <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
        </p:chart>



    </h:panelGrid>

</h:form>
<h:form>  
    <p:gmap id="gmap" center="36.8189700,10.1657900" zoom="12" type="HYBRID" model="#{infoWindowView.advancedModel}" style="width:100%;height:400px">

        <p:ajax event="overlaySelect" listener="#{infoWindowView.onMarkerSelect}" />

        <p:gmapInfoWindow id="infoWindow">
            <p:outputPanel style="text-align: center; display: block; margin: auto">

                        <h:graphicImage value="resources/images/orange.png" height="150" />
                    <br />
                    <h:outputText value="#{infoWindowView.marker.title}" />

            </p:outputPanel>
        </p:gmapInfoWindow>
    </p:gmap>

    <!-- Preload for demo -->
    <p:outputPanel style="display:none">

        <p:graphicImage name="images/#{orange.png}" title="orange.png" />
    </p:outputPanel>
</h:form>
</h:body>
  </ui:composition>

1 个答案:

答案 0 :(得分:0)

通过裁剪地图,您的意思是您仍然需要所有地图设施,但对于所选地区,您可以执行this之类的操作(当用户尝试裁剪地图并从原始地图构建中获取坐标时,请拍摄另一个地图将所选区域设置为新地图并向用户显示)用户仍然可以使用地图设施。