0

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

開発メニューを有効にしてから、User Agent を上書きして 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>

誰かがこの問題を回避する方法を見つけましたか、それとも保留中の修正がありますか?

4

1 に答える 1

0

「Google マップ v3 のペインの実装には一貫性がなく、使用されているペインによってはマーカー クリック イベントが機能しない」という質問の部分に関しては、問題は、あなたがしようとしている可能性があることです。マウス イベントの使用が意図されていないペインで、マウス イベントを使用します。

ペイン 1: overlayLayer- api-docから: DOM イベントを受信しない場合があります。

ペイン 2: overlayShadow- api-docから: DOM イベントを受信しない場合があります。

に焦点を当てているあなたの質問の部分に関してMapPanes：

ちなみに、overlayPane (#6) にマーカーを追加 すると、実際には、overlayShadow (#2) ペインにマーカーが追加されます。そのため、現時点では、ブラウザまたは プラットフォームでペイン 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;
}

これがお役に立てば幸いです-

于 2012-05-13T17:22:01.973 に答える