Question

我有这张地图，我需要通过Javascript设置一个配置来监听一些事件，我需要在地图完成Primefaces 5.2中的加载后这样做。

我有什么想法可以做到这一点？目前，当用户开始拖动地图时，我正在运行该功能但是我必须在地图准备好后立即执行此操作：

Primefaces：

<p:gmap widgetVar="map" id="mapaLocal" draggable="true"
        model="#{acessorioBean.mapModel}"
        center="#{acessorioBean.acessorio.latitude}, #{acessorioBean.acessorio.longitude}"
        zoom="20" type="HYBRID"
        style="width:98%;height:400px; margin: auto 0;">

        <p:ajax event="reverseGeocode"
            listener="#{acessorioBean.onReverseGeocode}" update="campoEndereco" />

        <p:ajax event="stateChange" onstart="configMap()"
            listener="#{acessorioBean.onMapStateChange}"
            update="campoLongitude,campoLatitude" />

    </p:gmap>

Javascript我获取地图实例并设置了一些事件：

var configMap = function() {
    if (map == null) {
        geocoder = new google.maps.Geocoder();
        map = PF('map').getMap();
        marker = map.markers[0];
        google.maps.event.addListener(map, 'center_changed', function() {
            marker.setPosition(map.getCenter());
        });
        google.maps.event.addListener(map, 'dragend', function() {
            marker.setPosition(map.getCenter());
            var lat = marker.getPosition().G;
            var lng = marker.getPosition().K;
            // firing Geocode only when the 'drag' ends
            PF('map').reverseGeocode(lat, lng);
        });
    }
};

感谢任何帮助！：）

Answer 1

＆＃39; tilesloaded＆＃39;事件应该那样做

google.maps.event.addListenerOnce(myGmap, 'tilesloaded', function(){
    //this part runs when the mapobject is created and rendered
});

Answer 2

我知道这个问题已经过时了，但我发现谷歌排名很高，而且还没有接受答案：

像widgetvar一样使用gmap。然后只需使用带有ready函数的jquery并通过widgetVarId获取地图：

<h:form id="page">
    <p:gmap id="gmap" widgetVar="map" center="48.137154, 11.576124" zoom="12" type="ROADMAP" style="width:300px; height:300px" />
    <h:outputScript>
        $("[id='page:gmap']").ready(function(){                     
            var gmap = PF('map').getMap();
            /* do your stuff here */
        });
    </h:outputScript>
</h:form>

有了这个，您可以在用户必须做任何事情之前更改您想要的任何内容。我用它来避免可点击的兴趣点和其他一些定制。

希望这会帮助其他人，他会像我一样找到这篇文章。

Answer 3

我遇到了同样的问题。你可以按如下方式解决它。

GMap代码：

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

<script type="text/javascript">
    setTimeout(function () {
        window.location.reload(1);
    }, 60000);
</script>  
<h:form  id="MapaForm" >  
    <h:panelGrid columns="1" columnClasses="column" > 
        <p:gmap  id="gmap"
                 center="#{btsController.latActual}, #{btsController.lngActual}"
                 zoom="#{btsController.zoom}" 
                 type="#{btsController.mapa}"
                 style="position: absolute;width:150%;height:99%" 
                 model="#{btsController.emptyModel}"  widgetVar="gmap"  >  
            <p:ajax event="overlaySelect" listener="#{btsController.onMarkerSelect}" />    
            <p:gmapInfoWindow>
                <h:panelGrid columns="2" columnClasses="column">
                    <p:outputLabel value="Nombre:"/>
                    <h:outputText id="infoWindowTitle" value="#{btsController.selectedMarker.title}" />
                    <p:outputLabel value="Sitio: "/>
                    <h:outputText id="infoWindowTitle2" value="#{btsController.selectedMarker.shadow}" />
                    <p:outputLabel value="Coordenadas: "/>
                    <h:outputText id="infoWindowTitle3" value="#{btsController.selectedMarker.latlng}" /> 
                </h:panelGrid>
            </p:gmapInfoWindow> 
        </p:gmap>    
    </h:panelGrid>  

</h:form>

在xhtml中：

<p:panel header="Buscar Coordenadas">
        <h:panelGrid columns="5" style="margin-bottom:10px" cellpadding="5">  
            <h:outputText value="Latitud (Ej:-22.362):"  ></h:outputText> 
            <p:inputText id="buscarLatitud" style="width:60px"  value="#{btsController.buscarLatitud}" ></p:inputText>
            <h:outputText value="Longitud (Ej:-59.256):" ></h:outputText> 
            <p:inputText id="buscarLongitud" style="width:60px" value="#{btsController.buscarLongitud}"  ></p:inputText>
            <p:commandButton value="Marcar" actionListener="#{btsController.Marcar}" update=":MapaForm:gmap" />  
        </h:panelGrid>
    </p:panel>

在控制器中：

private double buscarLatitud;
private double buscarLongitud;


public double getBuscarLongitud() {
    return buscarLongitud;
}

public void setBuscarLongitud(double buscarLongitud) {
    this.buscarLongitud = buscarLongitud;
}

public double getBuscarLatitud() {
    return buscarLatitud;
}

public void setBuscarLatitud(double buscarLatitud) {
    this.buscarLatitud = buscarLatitud;
}

public void addMarkerPoints(double lat, double lng, String title, String descripcion, String icono, String carpeta) {


    Marker marker = new Marker(new LatLng(lat, lng));
    marker.setTitle(title);
    marker.setClickable(true);
    marker.setShadow(descripcion);
    marker.setIcon(FacesContext.getCurrentInstance().getExternalContext().getRequestContextPath() + "/resources/" + carpeta + "/" + icono + ".png");

    emptyModel.addOverlay(marker);

}

public void Marcar() { 
    Double bLatitud = this.getBuscarLatitud();  
    Double bLongitud = this.getBuscarLongitud(); 
    addMarkerPoints(bLatitud, bLongitud, "Esta es la ubicación", "Indefinido", "ubicar_marca", "images");
}

如何在使用Primefaces的Gmap中准备好地图后运行js函数？

3 个答案: