0

在 OSX 上使用Safari，窗格的 Google Map 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>

有没有人找到解决此问题的方法，或者是否有待解决的问题？

4

1 回答 1

0

关于您说“窗格的 Google Map 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 回答