Question

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

 $(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。好吧它完美无缺。除了一个小问题。 infowindow的顶部部分被#map div的顶部边框隐藏。因此，用户可以通过“关闭”来查看文本的顶部。按钮，必须向下滚动。显然这很无聊，所以我想摆脱它。问题是，如何确保infowindow在加载时处于完整视图中。下面是它如何显示的图像。 SUCKY INFOWINDOW

Answer 1

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

起初，至少对我来说，infowindow会加载到正确的位置并进行平移，以使其完全可见。然后加载标记（浏览器需要片刻加载图像）。当标记可见时，infowindow会向上跳跃，部分跳出视口。

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

所以问题是：当infowindow打开时，API的标识大小仍然是未知的。

可能的解决方案：在标记位置打开infowindow并根据标记的大小（您可能事先知道大小）使用pixelOffset选项（默认标记有一个大小） 22x40）将infowindow放在标记的顶部：

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

Answer 2

试试这个css

.centerMarker{
  position:absolute;      
  background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat; /*URL of Marker*/
  top:50%;left:50%;/*use to center marker*/    
  z-index:1;
  /*Use the offset*/
  margin-left:-10px;
  margin-top:-34px;
  /*size of the image*/
  height:34px;
  width:20px;    
  cursor:pointer;
}

Demo

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

2 个答案: