谷歌地图:动态调整信息量

时间:2009-08-03 22:31:05

标签: javascript google-maps

如何在信息窗口打开后调整其大小?我在窗口内有一个超链接,它生成一个AJAX请求;在回调中我想调整信息窗口的大小。

3 个答案:

答案 0 :(得分:4)

查看以下内容。会发生什么是我创建一个最小的初始信息窗口 info(请参阅getInfoWindowHtml)。 gmap.openInfoWindowHtml调用提供了一个在infowindow打开后调用的回调。在该回调中,进行ajax调用并重置窗口内容。但是有两个问题:

我无法让窗口完全调整到返回的内容,所以我只使用了标准尺寸(请参阅markerClickFn返回的匿名函数中的新GSize(300,150))

  1. 我的情况是,如果标记靠近图像边界的极端,信息窗口的某些部分将被剪裁。 IOW,地图不会重新定位以包含infowindow。我可以解决这个问题,但这不是一个紧迫的问题。

    function markerClickFn(venue, latlng) {
        return function() {
        var title = venue.Name;
            var infoHtml = getInfoWindowHtml(venue);
            // need to zoom in
            gmap.setZoom(13);
            gmap.openInfoWindowHtml(latlng, infoHtml,
                {
                    onOpenFn: function() {
                        var iw = gmap.getInfoWindow();
                        iw.reset(iw.getPoint(), iw.getTabs(), new GSize(300, 150), null, null);
                        $("#info-" + venue.Id.toString()).load("/Venue/MapInfoWindow/" + venue.Id);
                    }
                }
                );
    
        };
    }
    
    function getSidebarHtml(venue) {
        var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow
        var html = "<li id='venue-" + venue.Id + "'>\n";
        html = html + venue.Name + "\n";
        //html = html + "<p class='description'>" + trunc(venue.Description, 200) + "</p>\n";           
        html = html + "</li>";
        return html;
    }
    
    function getInfoWindowHtml(venue) {
        var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow
        var html = "<div id='info-" + venue.Id + "'><a href='" + url + "' class='url summary'>" + venue.Name + "</a></div>\n";
        return html;
    }
    
    function addVenueMarker(venue) {
        var icon = new GIcon(G_DEFAULT_ICON);
        icon.image = "http://chart.apis.google.com/chart?cht=mm&amp;chs=24x32&amp;chco=FFFFFF,008CFF,000000&amp;ext=.png";
    
        var latLng = new GLatLng(venue.Lat, venue.Lng);
        var marker = new GMarker(latLng, { icon: icon });
        var fn = markerClickFn(venue, latLng);
        GEvent.addListener(marker, "click", fn);
        marker.event_ = venue;
        marker.click_ = fn;
        venue.marker_ = marker;
        markers.push(marker);
        return marker;
    }
    

答案 1 :(得分:3)

我发现动态调整InfoWindow的唯一解决方案是调用InfoWindow的setContent方法。您需要传入HTML节点或HTML字符串。这基本上重绘了InfoWindow。它本质上做的是关闭当前的并打开一个新的。因此,在重新加载内容时会看到闪烁。这种糟透了。谷歌似乎已经弃用了他们的v2 API,并且在新版本中做了很多事情。我认为谷歌在硅谷的街道上雇佣了一大批Sun Java开发人员,他们不知道如何提供简单易用的API,就像微软的阵营一样。真是令人沮丧!

答案 2 :(得分:2)

无法为信息窗口的大小调整设置动画,但有一个reset功能。文档说您可以将任何参数保留为null,但如果将'size'参数保留为null,则会出现错误。这意味着您必须指定InfoWindow的大小。

然而,由于这破坏了动态调整窗口大小的原始点,我强烈建议只关闭原始信息窗口并创建一个新的 - 这就是重置功能看起来要做的事情无论如何。