javascript - 谷歌地图 - 定义边界和信息窗口的事件操作区域

Question

Google Maps JavaScript API V3 中是否有一种方法可以在所有有效的边界和监听器内定义一个区域？

我不知道如何描述我正在寻找的东西。但我创建了一个示例(s.jsfiddle)以使其更加清晰:

例如，有一个 InfoWindow 应该仅在搜索输入上方的事件标记区域内弹出。

此外，搜索结果的范围也应显示在搜索字段上方，如下所示:

有没有办法按照我试图描述的方式操纵Google Maps JavaScript API V3？

<小时/>

编辑:将解决方案想法添加为 answer (它们之前已在问题部分中进行过解释)...

Answer 1

因为我可能(感谢反对票)在这里不会得到任何帮助，所以我暂时发布我的解决方案。 希望对将来的人有所帮助。

据我所知，这个问题没有标准的解决方案，所以我将问题分为两部分:

1. 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并输入搜索查询(例如复活节岛)来看看我的意思。