Google Maps JavaScript API V3
中是否有一种方法可以在所有有效的边界
和监听器
内定义一个区域?
我不知道如何描述我正在寻找的东西。但我创建了一个示例(s.jsfiddle)以使其更加清晰:
例如,有一个 InfoWindow
应该仅在搜索输入上方的事件标记区域内弹出。
此外,搜索结果的范围也应显示在搜索字段上方,如下所示:
有没有办法按照我试图描述的方式操纵Google Maps JavaScript API V3
?
编辑:将解决方案想法添加为 answer (它们之前已在问题部分中进行过解释)...
最佳答案
因为我可能(感谢反对票)在这里不会得到任何帮助,所以我暂时发布我的解决方案。 希望对将来的人有所帮助。
据我所知,这个问题没有标准的解决方案,所以我将问题分为两部分:
InfoWindow
的正确显示。我发现的唯一选择是覆盖max-height
。只要标记位于搜索输入上方,这种方法就暂时有效:JS:
google.maps.event.addListener(infowindow, 'domready', function() { var iwOuter = $('.gm-style-iw'); iwOuter.children(':nth-child(1)').addClass('custom-iw'); });
CSS:
.custom-iw { max-height: calc(100vh - 120px - 160px) !important; /** * 100vh total map height * 120px the position of the search input * 160px the size of the marker and the margin above the InfoWindow **/ }
请参阅updated jsfiddle然后单击标记看看我的意思。
为输入字段的搜索结果。我通过减去边界本高度度的相对部分来纠正边界。结果会显示在搜索输入上方一点。
JS
var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); var heightInput = Math.abs(parseInt($('.map-search').css('margin-top'))); var factor = $('#map').height() / heightInput; var south = sw.lat() - (ne.lat() - sw.lat())/factor; // That's where happens the correction bounds = new google.maps.LatLngBounds( new google.maps.LatLng(south, sw.lng()), new google.maps.LatLng(ne.lat(), ne.lng()) );
请参阅updated jsfiddle并输入搜索查询(例如复活节岛)来看看我的意思。
关于javascript - 谷歌地图 - 定义边界和信息窗口的事件操作区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45644196/