在javascript中刷新primefaces gmap标记答案

【问题标题】：Refresh primefaces gmap markers in javascript在javascript中刷新primefaces gmap标记
【发布时间】：2015-03-29 21:47:06
【问题描述】：

我需要在 primefaces gmap 上刷新、添加新标记或删除标记。通过 callBackParam 我将标记传递给 xhtml 中的 javascript。但是，当地图刷新时，从不触发事件 overlaySelect。 ManageBean 范围是 viewScoped

public void ajaxPoll() {
    Marker[] newMarkers = new Marker[mapLoadModel.getMarkers().size()];

    for(int i=0;i < newMarkers.length;i++){
        newMarkers[i]=mapLoadModel.getMarkers().get(i);
    }
    RequestContext.getCurrentInstance().addCallbackParam("newMarkers",new Gson().toJson(newMarkers));


      logger.info("refresco marcadores");
   }

javascript：

 //<![CDATA[
 function handleComplete(xhr, status, args){
 var gmap = PF('gMapWV').getMap();
 for(var i in gmap.markers)
{
  gmap.markers[i].setMap(null); 
} 
gmap.markers.length=0;
var newMarkers = eval('(' + args.newMarkers + ')');
for(var i in newMarkers)
    {
    var newMarker = newMarkers[i];
    var marker = new google.maps.Marker({
        id: newMarker.id,
        map: gmap,
        position: newMarker.latlng,
        icon:newMarker.icon,
        title:newMarker.title,
        clickable:true
    });
    }
  }
 // ]]>

还有地图：

 <p:poll interval="#{manageLoadExecution.refreshInterval}" listener="#{manageLoadExecution.ajaxPoll}" oncomplete="handleComplete(xhr, status, args)" process="@this" />
 <p:gmap widgetVar="gMapWV" id="gMapWV" center="#{manageLoadExecution.latitude} , #{manageLoadExecution.longitude}"  zoom="#{manageLoadExecution.zoomLevel}" fitBounds="false" type="terrain"  model="#{manageLoadExecution.mapLoadModel}" disableDefaultUI="false" styleClass="map" >
  <p:ajax event="overlaySelect" listener="#{manageLoadExecution.onMarkerSelect}"  />
  <p:gmapInfoWindow id="infoWindow" maxWidth="400"  >
                    <p:outputPanel style="text-align: left; display: block; margin: auto; width:370px" >

刷新后，标记会显示在屏幕上，但不会触发 overlaySelect 事件且信息窗口未打开。

我想删除所有标记我正在删除一些使事件不会触发的标记。

请帮忙！非常感谢。

【问题讨论】：

可以提供PF版吗？你检查过不同的浏览器吗？
嗨！非常感谢 Kukeltje。我正在使用 PF 5.1，并且我已经检查了 Chrome 和 Firefox，但它在两者上都不起作用。再次感谢
如果你可以创建一个minimal reproducible example (stackoverflow.com/help/mcve) 我可以检查未压缩的 js 源
我想我必须将所有新标记订阅到现有的 overlaySelect 事件，但我不知道该怎么做:(
那是我的怀疑...让我快速浏览一下相关的 PF js 文件gmap.js

标签： javascript google-maps jsf primefaces

【解决方案1】：

我成功了！我错过了在 javascript scriptlet 中添加新标记的 id。最后在 javascript 代码中我调用 _render() 方法来配置标记和侦听器。

这是 javascript 脚本：

<script>
//<![CDATA[
function handleComplete(xhr, status, args){
   var gmap = PF('gMapWV').getMap();
   var newMarkers = eval('(' + args.newMarkers + ')');
   for(var i in gmap.markers)
   {
      var oldMarker = gmap.markers[i];
      var newMarker = newMarkers[i];
      if(newMarker != null){
         oldMarker.setPosition(newMarker.latlng);
         oldMarker.title=newMarker.title;
         oldMarker.setMap(gmap);
         oldMarker.id=newMarker.id;
      }else{
         oldMarker.setMap(null);
      }
   } 
   var oldMarkersLength = gmap.markers.length;
   var newMarkersLength = newMarkers.length;

   for(var i = oldMarkersLength;i < newMarkersLength;i++)
      {
      var newMarker = newMarkers[i];
      var marker = new google.maps.Marker({
          position: newMarker.latlng,
          title:newMarker.title,
          clickable:true,
          id:newMarker.id
      });
      gmap.markers[i]= marker;
      }
    PF('gMapWV').addOverlays(gmap.markers);
    PF('gMapWV')._render();

 }
// ]]>
</script>

如果列表减小了大小，我将剩余标记设置为 null 以便在需要时重复使用。

我希望这可以帮助任何坚持使用 gmap 和 primefaces 的人。

感谢大家的建议

【讨论】：

这似乎过于复杂。您正在重用旧的 gmap.markers 数组，但这似乎是事先优化的情况。您可以从gmap 中删除所有标记，然后再次添加它们。我发现的一件事是，在删除所有标记并执行gmap.markers.length = 0，然后使用new google.maps.Marker({ map: map }) 添加新标记后，数组gmap.markers 为空。因此，再次替换标记的 second 传递实际上并没有删除任何内容。我找到的解决方案很简单，但看起来像个 hack：使用 maps.markers.push(marker)。

【解决方案2】：

尝试这样做，它对我有用（对于那些不想刷新地图的人）：

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

        var marker = new google.maps.Marker({
            id: json.id,
            map: gmap,
            position: json.latlng,
            icon: json.icon,
            title: json.title,
            draggable: true,
            clickable:true
        });

        gmap.markers[gmap.markers.length] = marker; 
        PF('gmap').addOverlay(marker); 

PF('gmap').configureMarkers();
PF('gmap').addOverlays(gmap.markers);

【讨论】：