使用 javascript 在 pf p:dialog 中到达 primefaces gmap答案

【问题标题】：Reach a primefaces gmap inside a pf p:dialog using javascript使用 javascript 在 pf p:dialog 中到达 primefaces gmap
【发布时间】：2017-02-11 11:29:04
【问题描述】：

我在 p:dialog 中有一个 p:gmap

<p:dialog widgetVar="vehicleTrackingDlg" rendered="#{sessionBean.vehicleTracking}" 
              width="630" height="405" modal="true" appendTo="@(body)" resizable="false" header="Map">
        <p:gmap id="map" center="30, 20" zoom="13" type="ROADMAP" fitBounds="true" 
                style="width:600px;height:400px" widgetVar="gmap" rendered="#{sessionBean.vehicleTracking}" /> 
</p:dialog>

我正在尝试在 javascript 文件的“initialize()”函数中获取“gmap”变量。

function initialize()
{
    map = PF('gmap').getMap();

    directionsService = new  google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();

    markerMe = new google.maps.Marker({title: "Ben"});

    markerSelectedVehicle = new google.maps.Marker();
    var image = '../resources/images/favicon_red.ico';
    markerSelectedVehicle.setIcon(image);
}

javascript 文件中的映射变量不是以这种方式初始化的。如果我将 p:gmap 从 p:dialog 中取出，它可以正常工作。我如何在 p:dialog 中到达 p:gmap。是关于 p:gmap 没有初始化，因为 p:dialog 在 javascript initialize() 阶段没有被调用？

提前致谢。

【问题讨论】：

如果删除渲染的属性会怎样
在我的尝试中条件为“真”。当我从 p:dialog 中获取 p:gmap 时，它可以工作，但地图位于页面中的随机位置。
sessionBean.vehicleTracking 是如何设置为 true 的，它是始终为 true 还是根据用户在页面上执行的操作设置为 true？从哪里调用 initialize()？
默认情况下它不是真的，但我的测试中的条件是真的，因为用户有权查看与地图相关的菜单。 initialize() 通过 google.maps.event.addDomListener(window, 'load', initialize) 调用；在窗口负载。正如我所说，当 p:gmap 不在 p:dialog 时它工作正常。尝试在 p:dialog 的 widgetvar 中访问 p:gmap 的 widgetvar 时可能是关于语法？
您可以在 firebug 的控制台中测试语法和是否存在。我会说无论是否在对话中，语法都是相同的。一位同事在添加窗口加载侦听器时遇到了问题，因为他无法选择它应该在 PF 加载内容之前还是之后运行。我会说你的应该追，但我不知道那是不是你的问题

标签： google-maps jsf primefaces dialog

【解决方案1】：

花一两分钟时间做好准备——这意味着当 $(function() { } );文档就绪调用发生，小部件可能还没有准备好。

在$(function() { } ); 中包围您的代码，就像在enter link description here 中一样

   <script type="text/javascript">
$(function() { 

    var map = PF('gmap').getMap();

    directionsService = new  google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();

    markerMe = new google.maps.Marker({title: "Ben"});

    markerSelectedVehicle = new google.maps.Marker();
    var image = '../resources/images/favicon_red.ico';
    markerSelectedVehicle.setIcon(image);

} );
</script>

【讨论】：