2016-04-21 5 views
1

У меня есть <p:gmap> с определенными маркерами. Я хотел бы обрезать часть этого <p:gmap>. Я не могу сделать это с <p:imageCropper>, потому что он обрезает изображение, а не карту Google. Как я могу захватить определенную часть Карты Google?Как обрезать часть <p:gmap>?

Это моя карта боб:

@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> 
+0

Я не пробовал это лично, но я прочитал об использовании ** Clustering **, чтобы упростить визуализацию данных или захватить определенную часть Карты Google, объединив данные, находящиеся рядом друг с другом на карте в совокупная форма. Существующие методы, которые будут использоваться, можно найти в [MarkerClusterer для Карт Google] (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html) и для различных подходов , [Слишком много маркеров] (https://developers.google.com/maps/articles/toomanymarkers#introduction) могут добавить дополнительные данные, которые могут удовлетворить желаемый результат. – Teyam

+0

SO post - [Обрезка Google Карт]] (http://stackoverflow.com/questions/21212547/google-maps-cropping) также может помочь. – Teyam

+0

Спасибо за ваш ответ, я увижу его ^^ – MedBC

ответ

0

кадрирования карты вы имеете в виду вы все еще хотите, чтобы все карты объектов, но и для выбранного региона, то вы может сделать что-то вроде this (возьмите другую карту, когда пользователь попытается обрезать карту и получить координаты от первоначальной сборки карты, установите выбранный регион на новую карту и покажите пользователю), пользователь все равно сможет использовать объекты карты.

+0

Спасибо за ваш ответ, но эта помощь не поможет мне, потому что я должен обрезать то, что пользователь видит и хочет обрезать (он может масштабировать или выбирать некоторые маркеры ...), я нашел [solution] (https://html2canvas.hertzen.com/documentation.html) Я попробую, и если это не сработает, я буду использовать phantomJS для захвата интерфейса и изменения его размера ^^ – MedBC

+0

Все самое лучшее, если это будет сделано, t забыть поставить ответ здесь, чтобы он помог кому-то ... :) – techipank

+0

нормально я надеюсь так :) – MedBC