覆蓋Primefaces GMap渲染器類

我想重寫GMap渲染器類，所以我可以在渲染器階段爲它設置樣式。我通過js函數window.onload=function(...)來設置它，但它非常難看，因爲地圖首先顯示默認樣式。只有1-2秒後，它纔會改變風格。覆蓋Primefaces GMap渲染器類

這是我的渲染器類：

public class MyGMapRenderer extends GMapRenderer { 

@Override 
protected void encodeScript(FacesContext context, GMap map) throws IOException { 
    ResponseWriter writer = context.getResponseWriter(); 
    String clientId = map.getClientId(); 
    String widgetVar = map.resolveWidgetVar(); 
    GMapInfoWindow infoWindow = map.getInfoWindow(); 

    startScript(writer, clientId); 

    writer.write("$(function() {"); 

    writer.write("PrimeFaces.cw('GMap','" + widgetVar + "',{"); 
    writer.write("id:'" + clientId + "'"); 

    //Required configuration 
    writer.write(",mapTypeId:google.maps.MapTypeId." + map.getType().toUpperCase()); 
    writer.write(",center:new google.maps.LatLng(" + map.getCenter() + ")"); 
    writer.write(",zoom:" + map.getZoom()); 

    if (!map.isFitBounds()) { 
     writer.write(",fitBounds:false"); 
    } 

    //Overlays 
    encodeOverlays(context, map); 

    //Controls 
    if (map.isDisableDefaultUI()) { 
     writer.write(",disableDefaultUI:true"); 
    } 
    if (!map.isNavigationControl()) { 
     writer.write(",navigationControl:false"); 
    } 
    if (!map.isMapTypeControl()) { 
     writer.write(",mapTypeControl:false"); 
    } 
    if (map.isStreetView()) { 
     writer.write(",streetViewControl:true"); 
    } 

    //Options 
    if (!map.isDraggable()) { 
     writer.write(",draggable:false"); 
    } 
    if (map.isDisableDoubleClickZoom()) { 
     writer.write(",disableDoubleClickZoom:true"); 
    } 

    //##### HERE THE ONLY LINE I ADDED #### 
    writer.write(",styles:[{\"stylers\":[{hue:\"#0077ff\"}]}]"); 


    //Client events 
    if (map.getOnPointClick() != null) { 
     writer.write(",onPointClick:function(event) {" + map.getOnPointClick() + ";}"); 
    } 

    /* 
    * Behaviors 
    * - Adds hook to show info window if one defined 
    * - Encodes behaviors 
    */ 
    if (infoWindow != null) { 
     Map<String, List<ClientBehavior>> behaviorEvents = map.getClientBehaviors(); 
     List<ClientBehavior> overlaySelectBehaviors = behaviorEvents.get("overlaySelect"); 
     for (ClientBehavior clientBehavior : overlaySelectBehaviors) { 
      ((AjaxBehavior) clientBehavior).setOnsuccess("PF('" + widgetVar + "').openWindow(data)"); 
     } 
    } 

    encodeClientBehaviors(context, map); 

    writer.write("});});"); 

    endScript(writer); 
} 
}

faces-config.xml中：

<render-kit> 
    <renderer> 
     <component-family>org.primefaces.component</component-family> 
     <renderer-type>org.primefaces.component.GMapRenderer</renderer-type> 
     <renderer-class>br.com.carona.mb.MyGMapRenderer</renderer-class> 
    </renderer> 
</render-kit>

其他觀察結果是，我更新時，它提出瞭解決辦法，以防止難看的閃光通過全部重新繪製地圖通過ajax。所以我通過javascript，remoteCommand和inputHidden的組合來添加和操作來自後臺bean的每個標記。它工作得很好。

唯一的問題是，當疊加選擇觸發事件：

var markers = new Array(); 
function loadMarks(){ 
for(var i=0;markers.length>i; i++){ 
    markers[i].setMap(null); 
} 


markers = new Array(); 
var marksJSON=document.getElementById('form:marks').value; 
var marksArray= JSON.parse(pontosStr); 
bounds = new google.maps.LatLngBounds(); 
for (var i = 0;pontos.length>i; i++) { 
    var ponto = pontos[i]; 
    var marker= new google.maps.Marker(
    { 
     position: new google.maps.LatLng(ponto.lat, ponto.lon), 
     icon: ponto.icon, 
     id: ponto.id, 
     draggable: ponto.draggable 
    }); 

    marker.setMap(wmap.getMap()); 
    bounds.extend(marker.getPosition()); 

    //THAT DON'T WORK ANYMORE 
    google.maps.event.addListener(marker, 'click', function(event) { 
     wmap.fireOverlaySelectEvent(event, this); 
    }); 


    //Drag is working fine 
    google.maps.event.addListener(marker, 'dragend', function(event) { 
     wmap.fireMarkerDragEvent(event, this); 
    }); 

    markers.push(marker); 
} 
var map=wmap.getMap(); 
var zoomChangeBoundsListener = 
google.maps.event.addListener(map, 'bounds_changed', function(event) { 
    google.maps.event.removeListener(zoomChangeBoundsListener); 
    map.setZoom(Math.min(17, map.getZoom())); 
}); 
wmap.getMap().fitBounds(bounds); 
}

我的地圖：

<p:gmap id="gmap" widgetVar="wmap" mapTypeControl="false" fitBounds="true" center="-18.57904130, -46.51830770" model="#{procuraRotaMB.mapModel}" zoom="14" type="ROADMAP" style="width:700px;height:600px"> 
        <p:ajax event="pointSelect" listener="#{procuraRotaMB.onPointSelect}" update=":form:marks" oncomplete="setupMarks();" /> 
        <p:ajax event="markerDrag" listener="#{procuraRotaMB.onMarkerDrag}" update=":formProcurar:pontos" oncomplete="setupMarks();" /> 
        <p:ajax event="overlaySelect" listener="#{procuraRotaMB.onMarkerSelect}" update=":form:destinoRota,:form:infoW" oncomplete="setupDestiny();"/> 
        <p:gmapInfoWindow id="infoW"> 
          ... 
        </p:gmapInfoWindow> 
</p:gmap>

編輯：

我剛剛發現的問題實際上是在InfoWindow中。當我刪除它時，一切正常。

來源

2014-01-13 gvieira

錯誤是GMapRenderer類中的源代碼和JAR之間的分歧。更確切地說，在編寫行爲的行中，在encodeScript方法中。

我已經在primefaces論壇發佈了這個問題。

來源

2014-01-14 12:34:19 gvieira

覆蓋Primefaces GMap渲染器類

回答

相關問題