javascript - 谷歌地图加载部分隐藏的信息窗口

Question

所以我有以下代码在 map 加载时显示信息窗口。

 $(document).ready(function() {
   var mapCenter = new google.maps.LatLng(-1.09694,37.01535409999997); //Google map Coordinates
   var map;
    map_initialize(); //load map
    function map_initialize()   
    {
        //Google map option
        var googleMapOptions =
        {
            center: mapCenter, // map center
            zoom: 17, //zoom level, 0 = earth view to higher value
            panControl: true, //enable pan Control
            zoomControl: true, //enable zoom control
            zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL //zoom control size
        },
            mapTypeControlOptions:
            {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.BOTTOM_CENTER
            },
            scaleControl: true, // enable scale control
            mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };
        var map = new google.maps.Map(document.getElementById("map"),googleMapOptions);

        var image = '/resource-image-files/brand_full.png';
        var infodata = '<section id="content" style="margin:0px;padding:0px;"><h1 style="margin:0px;padding:0px;"><img style="position:relative;left:0%;" width="15%" height="15%" src="/resource-image-files/brand_full.png" alt="Fair Acres House, Karen"/> Fair Acres House, Karen</h1><article><p>Welcome to Fair Acres House, Karen. Get the best accommodation at our exquisite suites.</p><p>We are located in a Karen, A short drive from Nairobi and at the foot of the Ngong Hills.</p><p>For More information, get <a href="http://fairacres-nairobi.co.ke">Fair Acres site</a> For More Information.</p></article></section>';
        var infowindow = new google.maps.InfoWindow({content: infodata});
        var marker = new google.maps.Marker(
        {
            position: mapCenter,
            map:map,
            title: "FairAcres House, Karen"
            //icon: image
        });
        marker.setMap(map);
    //infowindow.open(map,marker);
    google.maps.event.addListener(window, 'load', function(){infowindow.open(map,marker);});
    }
});

我希望 div 在页面加载时显示 div。好吧，它完美无缺。除了一个小问题。 信息窗口的顶部被#map div 的顶部边框部分隐藏。因此，为了让用户查看带有“关闭”按钮的文本顶部，必须向下滚动。 显然这很无聊，所以我想摆脱它。 问题是， 我如何确保信息窗口在加载时处于全 View 状态。 下面是它如何显示的糟糕图像。

Answer 1

看起来(我猜这个问题与 this page 有关)这个问题是由标记引起的。

至少对我来说，一开始信息窗口会加载到正确的位置并进行平移，以便完全可见。然后加载标记(浏览器需要一点时间来加载图像)。当标记可见时，信息窗口会向上跳，部分超出视口(viewport)。

原因:当您打开绑定(bind)到标记的信息窗口时，API 需要知道标记的大小(您可能已经注意到信息窗口的尖端位于标记的顶部，而不是在标记位置....当它被放置在标记位置时它会覆盖标记)。

所以问题是:当信息窗口打开时，API 仍然不知道标记的大小。

可能的解决方案: 在标记位置打开信息窗口并根据标记的大小(您可能事先知道大小)使用 pixelOffset 选项(默认标记有一个大小22x40)将信息窗口放在标记的顶部:

infowindow.setOptions({position:marker.getPosition(),
                       pixelOffset:new google.maps.Size(0,-40),
                       map:map});