SafariのOSXとWindowsでペインイベントが一致しない

Question

Safari on OSX、Googleマップv3のペインの実装に一貫性がなく、どのペインが使用されているかによってマーカークリックイベントが機能しなくなります。

は、Safari for Windowsとして報告するようにユーザーエージェントをオーバーライドすると、他のすべてのブラウザ（FF、IE、Chromeなど）と一致します。これは、変更されたすべてがユーザーエージェントの文字列であるため、Google API内で問題であることを示しているようです。

ただし、overlayPane（＃6）にマーカーを追加すると、実際にoverlayShadow（＃2）ペインにマーカーが追加されます。したがって、現在のところ、ブラウザやプラットフォームのペイン6に何も追加することはできません。

次の例を使用すると、各マーカーの上にマウスを移動することで問題が確認できます。マーカーがホバーイベントを受信すると、マーカーは緑色に変わります。

<style type="text/css"> 
    html, body, #map_canvas 
    { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
    } 
</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var map; 

    function initialize() { 
     var myOptions = { 
      zoom: 7, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

     for (var i = 0; i <= 5; i++) { 
      var m = new marker(i); 
      m.setMap(map); 
     } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    function marker(index) { 
     this._latlng = new google.maps.LatLng(-34.397 + (index * .1), 150.644 + (index * .1)); 
     this._div = null; 
     this._index = index; 
    } 
    marker.prototype = new google.maps.OverlayView(); 
    marker.prototype.onAdd = function() { 
     var div = document.createElement('DIV'); 
     var label = document.createTextNode(this._index + 1); 

     div.appendChild(label); 

     div.id = this._index + 1; 
     div.style.border = "1px solid black"; 
     div.style.backgroundColor = "red"; 
     div.style.width = "20px"; 
     div.style.height = "20px"; 
     div.style.position = "absolute"; 

     google.maps.event.addDomListener(div, 'mouseover', function() { 
      this.style.backgroundColor = "green"; 
     }); 

     google.maps.event.addDomListener(div, 'mouseout', function() { 
      this.style.backgroundColor = "red"; 
     }); 

     this._div = div; 

     var panes = this.getPanes(); 

     switch (this._index) { 
      case (0): 
       panes.overlayLayer.appendChild(div); 
       break; 
      case (1): 
       panes.overlayShadow.appendChild(div); 
       break; 
      case (2): 
       panes.overlayImage.appendChild(div); 
       break; 
      case (3): 
       panes.floatShadow.appendChild(div); 
       break; 
      case (4): 
       panes.overlayMouseTarget.appendChild(div); 
       break; 
      case (5): 
       panes.overlayShadow.appendChild(div); 
       break; 
     } 
    } 
    marker.prototype.draw = function() { 
     var projection = this.getProjection(); 
     if (projection) { 
      var div = this._div; 

      var point = projection.fromLatLngToDivPixel(this._latlng); 
      if (point && div != null) { 
       div.style.left = point.x - 10 + 'px'; 
       div.style.top = point.y + -10 + 'px'; 
      } 
     } 
    } 
</script> 
<div id="map_canvas"></div> 

誰かがこの問題を回避する方法を見つけたか、修正が保留されていますか？

Answer 1

「Googleマップv3のペインのインプリメンテーションが矛盾していて、使用されているペインに応じてマーカークリックイベントが機能しない」と言われている部分については、これは、DOMイベントを受信しない場合があり： - ：

ペイン1：api-docからoverlayLayerマウスイベントが使用されることを意図していないのペイン上のマウスイベントを利用するようにしようとすることができます。

ペイン2：overlayShadow - api-doc：DOMイベントが受信されないことがあります。 overlayPaneにマーカーを追加する。なお

、（＃6）実際にoverlayShadowに マーカーを追加します（＃2：MapPanesに焦点を当てているあなたの質問の一部について

）ウィンドウを開きます。現在のところ、いずれのブラウザでもペイン6に何かを追加することはできません。 プラットフォームなど、現在のところ はありません。

まず、overlayPaneはありません。あなたがペイン6について話しているのであれば、下から上へ、私はあなたが言うことを意味すると信じています：floatPane。また、私はこの問題は、実際にあなたのswitch文のコードのバグだと思う：

switch (this._index) { 
    case (0): 
     panes.overlayLayer.appendChild(div); 
     break; 
    case (1): 
     panes.overlayShadow.appendChild(div); 
     break; 
    case (2): 
     panes.overlayImage.appendChild(div); 
     break; 
    case (3): 
     panes.floatShadow.appendChild(div); 
     break; 
    case (4): 
     panes.overlayMouseTarget.appendChild(div); 
     break; 
    case (5): 
     // This code is a duplicate of the code in case(1): 
     panes.overlayShadow.appendChild(div); 
     // I believe what you want here is: 
     panes.floatPane.appendChild(div); 
     break; 
} 

私はこれが役に立つことを願う -