当标记位于打开的信息框后面时 – 使用InfoBox插件Google Maps API v3进行事件鼠标hover
我在使用Google Maps API的v3时遇到了问题，并使用InfoBox插件专门针对此可用性问题用例：
由于我的地图需要在将鼠标hover在每个相应标记上时打开自定义信息框，因此当地图上有2个靠近的标记时，即使其中一个标记位于当前打开的信息框后面将鼠标hover在另一个旁边标记上时，它会在鼠标hover在标记上时触发（即使它位于当前打开的信息框后面），另一个信息框阻碍当前/先前打开的信息框
我在这里通过另一张海报跟踪问答流程： 谷歌地图API v3使用InfoBox插件的事件鼠标hover并遵循推荐的代码，但我无法理解如何防止打开信息框后面的标记在信息框关闭之前不要触发。
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 = 'Just try to click me!
Hovering over this text will result in a mouseout event firing on the map-popup element and this will disappear.'; // 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 = 'Just try to click me!
Hovering over this text will result in a mouseout event firing on the map-popup element and this will disappear.'; // Scope var gpoint = this; // Events google.maps.event.addListener(gpoint.marker, 'mouseover', function() { popup(gpoint); }); }
在做实验之后，我怀疑这个问题与z-index无关……我是否正确理解这需要在javascript中捕获？
任何帮助或建议将不胜感激！
为标记添加优化：false属性可以解决问题。
this.marker = new google.maps.Marker({ position: new google.maps.LatLng(39.295003,-76.545234), map: _map, optimized: false });