Question

我有一个嵌入在xhtml中的谷歌地图。它有带有弹出InfoBoxes的标记，我从InfoWindows转换为利用布局控制，但现在我得到了一些不一致的行为。当页面首次加载信息框时，所有信息都会通过鼠标悬停正常打开。但是，当我在地图上移动或将光标从地图上移开并重新开启时，它们开始表现不佳，有时它们起作用，有时不起作用。

 /* map stuff */

 var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: new google.maps.LatLng(41.40, -91.32),
  mapTypeId: google.maps.MapTypeId.HYBRID
});



google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

 var marker;


 /* load each marker with info */

function addEvents(lat, lng, markerInfo) {        


 /* set each marker */  

       marker = new google.maps.Marker({
         position: new google.maps.LatLng(lat, lng),
         map: map
       });

   var iconFile = '#{request.contextPath}/img/pin.png'; 
    marker.setIcon(iconFile); 

 /* infoBox properties - tried moving this to global, doesn't work */
    var boxOpts = {
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-140, 0),
            boxStyle: { 
              background: '#ffffff',
              opacity: 1,
              width: '180px'
            },
            closeBoxURL: '',
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: 'floatPane',
            enableEventPropagation: true
    };

 var infobox = new InfoBox(boxOpts);
 var html = '<div style="color:#333; font-size:12px; box-shadow: 12px 12px 8px 4px rgba(0,0,0,0.4);">' markerInfo + '</div>';


 /* mouseover shows infoBox - only works sometimes, tried addListener as well */

   google.maps.event.addDomListener(marker, 'mouseover', function(){
       infobox.setContent(html);
       infobox.open(map, this);
  });

   google.maps.event.addDomListener(marker, 'mouseout', function(){
       infobox.close(map, this);

   });
}

这里调用addEvents函数：

 <div id="myController" style="visibility: hidden;">
    <rich:dataList var="eventAdd" value="#{some.resultList}">
  <script type="text/javascript">
         addEvents('<h:outputText value="#{eventAdd.latitude}"/>', 
           '<h:outputText value="#{eventAdd.longitude}"/>',                             
           '<h:outputText value="#{eventAdd.markerInfo}"/>
     );
     </script>

似乎没有任何模式可以解释为什么有些工作，有些则没有，它并不总是相同的。我可以鼠标悬停一个，infoBox显示，移动到另一个，它没有，移回到前一个，它也没有显示。 ETA：当我回到InfoWindow时，弹出窗口会按预期显示。

鼠标悬停期间，谷歌地图信息框不会持续弹出

0 个答案: