0

GMap レンダラー クラスをオーバーライドしようとしているので、レンダラー フェーズでスタイルを設定できます。これをjs関数で設定してwindow.onload=function(...)いましたが、マップがデフォルトのスタイルで最初に表示されるため、非常に醜いです。スタイルが変わるのは1〜2秒後です。

それが私のレンダラークラスです:

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);
}
}

顔-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 にあることがわかりました。それを削除すると、すべてが正常に機能します。

4

1 に答える 1