javascript - 当标记位于打开的信息框后面时 - 使用 InfoBox 插件 Google Maps API v3 事件鼠标悬停

Question

我在使用 Google Maps API v3 和使用 InfoBox 插件时遇到问题，特别是关于这个可用性问题用例:

由于我的 map 需要在将鼠标悬停在每个相应标记上时打开自定义信息框，因此本地图上有 2 个非常接近的标记时，即使/如果其中一个标记位于信息框后面当前在悬停另一个附近的标记后打开，当鼠标悬停在它的标记上时触发它(即使它在当前打开的信息框后面)并且另一个信息框阻碍当前/以前打开的信息框

我已按照此处另一位发帖人的问答过程进行操作:Google Maps API v3 Event mouseover with InfoBox plugin并遵循了推荐的代码，但我无法全神贯注于如何防止打开的信息框后面的标记在该信息框关闭之前不被触发。

var gpoints = [];

function initializeMap1() {

    var Map1MileLatLang = new google.maps.LatLng(39.285900,-76.570000);
    var Map1MileOptions = {
      mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
        },
       mapTypeControl: false,
        zoom: 14,
      center: Map1MileLatLang,
      //mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeId: 'Styled' 
    };
    var Map1Mile = new google.maps.Map(document.getElementById("map_canvas"), Map1MileOptions);
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });//new
    Map1Mile.mapTypes.set('Styled', styledMapType);//new

   for ( var i=0; i<5; i++ ) {
            gpoints.push( new point(Map1Mile) );
            gpoints.push( new point2(Map1Mile) );
   }

function popup(_point) {
        _point.popup = new InfoBox({
            content:            _point.content,
            pane:               'floatPane',
            closeBoxURL:        '',
            alignBottom:        1
        });

        _point.popup.open(_point.marker.map, _point.marker);

            google.maps.event.addListener(_point.popup, 'domready', function() {
            //Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)

                $(_point.popup.div_).hover(
                    function() {
                        //This is called when the mouse enters the element
                    },
                    function() {
                        //This is called when the mouse leaves the element
                        _point.popup.close();
                    }
                );
            });  

   }

 function point(_map) {
        this.marker = new google.maps.Marker({
            position:           new google.maps.LatLng(39.291003,-76.546234),
            map:                _map
        });

        this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">Just try to click me!</a><br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';

        // Scope
        var gpoint = this;

        // Events
        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            popup(gpoint);
    });

    }



 function point2(_map) {
        this.marker = new google.maps.Marker({
            position:           new google.maps.LatLng(39.295003,-76.545234),
            map:                _map
        });

        this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">Just try to click me!</a><br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';

        // Scope
        var gpoint = this;

        // Events
        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            popup(gpoint);
        });
    }

经过实验，我怀疑这个问题与 z-index 无关...我理解这需要在 javascript 中捕获是否正确？

如有任何帮助或建议，我们将不胜感激!

Answer 1

为标记添加 optimized: false 属性应该可以解决问题。

this.marker = new google.maps.Marker({
        position:           new google.maps.LatLng(39.295003,-76.545234),
        map:                _map,
        optimized:          false
    });