信息框

信息框

关注
发信
关注(28)粉丝(399)

当标记位于开放信息框背后时 - 带有InfoBox插件Google Maps API v3的事件鼠标悬停

本文介绍了当标记位于开放信息框背后时 - 带有InfoBox插件Google Maps API v3的事件鼠标悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在使用Google Maps API v3时遇到问题，并专门针对此可用性问题使用InfoBox插件：

由于我的地图需要自定义信息框在将鼠标悬停在每个相应标记上时打开，当地图上有两个靠近的标记时，即使/如果其中一个标记位于当前悬停的信息框后面，通过标记，当鼠标悬停在标记上时它会被触发（即使它位于当前打开的信息框的后面），而另一个信息框会阻止当前/之前打开的信息框

通过其他海报提问和回答问题：并遵循了推荐的代码，但我无法围绕如何防止标记躺在一个开放的我nfobox在该信息框关闭之前不会触发。 

  var gpoints = []; 
 
函数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 $ b $ var 
 for（var i = 0; i  gpoints.push（new point（Map1Mile））; 
 gpoints.push（new point2（Map1Mile））; 
 
 
函数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（）{
 //必须将其放在domready中，否则它无法找到div元素（在InfoBox被打开前它是空的）
 
 $（_ point.popup.div _）。hover（
 function（）{
 //当鼠标进入时调用它元素
}，
 function（）{
 //当鼠标离开元素时调用
 _point.popup.close（）; 
} 
）; 
}）; 
 
 
 
功能点（_map）{
 this.marker = new google.maps.Marker（{
 position：new google.maps。 LatLng（39.291003，-76.546234），
 map：_map 
}）; 
 
 this.content ='< div class =map-popupstyle =width：100px;>< div class =map-popup-window>< div class =map-popup-content>< a href =http://www.google.com/>只需点击我即可！< / a>< br />文字将产生一个< code>鼠标< / code>在< code>地图 - 弹出式窗口< / code>上触发事件元素，这会消失。< / div>< / div>'; 
 
 //范围
 var gpoint = this; 
 
 //活动
 google.maps.event.addListener（gpoint.marker，'mouseover'，function（）{
 popup（gpoint）; 
}） ; 
 
 
 
 
 
 function point2（_map）{
 this.marker = new google.maps.Marker（{
位置：new google.maps.LatLng（39.295003，-76.545234），
 map：_map 
}）; 
 
 this.content ='< div class =map-popupstyle =width：100px;>< div class =map-popup-window>< div class =map-popup-content>< a href =http://www.google.com/>只需点击我即可！< / a>< br />文字将产生一个< code>鼠标< / code>在< code>地图 - 弹出式窗口< / code>上触发事件元素，这会消失。< / div>< / div>'; 
 
 //范围
 var gpoint = this; 
 
 //活动
 google.maps.event.addListener（gpoint.marker，'mouseover'，function（）{
 popup（gpoint）; 
}） ; 
}

完成实验后，我怀疑这个问题与z-index无关。 。我正确理解这个需要在javascript中被捕获吗？



任何帮助或建议将不胜感激！

解决方案

为您的标记添加 optimize：false 属性应该可以解决问题。

<$ p $ this.marker = new google.maps.Marker（{
position：new google.maps.LatLng（39.295003，-76.545234），
map：_map，
优化：false
}）;


I'm having trouble with v3 of the Google Maps API and using the InfoBox plugin specifically with respect to this usability issue use case:

Since my map requires a custom infobox to be opened upon hovering the mouse over each respective marker, when the map has 2 markers on it that are close in proximity, even when/if one of the markers lies behind an infobox that is currently open after hovering the other close-by marker, it is triggered when mousing over it marker (even though it's behind the currently open infobox) and the other infobox obstructs the currently/previously opened infobox

I've followed the question and answer process by another poster here: Google Maps API v3 Event mouseover with InfoBox plugin and have followed the recommended code, but i can't wrap my mind around how to prevent markers that lie BEHIND an open infobox to not be triggered until that infobox is closed.

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);
        });
    }

After doing experimenting, i suspect this issue is irrelevant to z-index... am i correct in understanding this needs to be caught in the javascript?

Any help or advice would be greatly appreciated!

解决方案

Adding optimized: false attribute for your markers should solve the problem.

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

这篇关于当标记位于开放信息框背后时 - 带有InfoBox插件Google Maps API v3的事件鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-27 04:38
Powered by LMLPHP ©2024 信息框 0.006860