获取 Google Maps v3 以调整 InfoWindow 的高度

Posted 2023-02-23

【中文标题】获取 Google Maps v3 以调整 InfoWindow 的高度

【英文标题】：Get Google Maps v3 to resize height of InfoWindow

【发布时间】：2011-07-15 21:57:07

【问题描述】：

当我单击标记并出现 InfoWindow 时，如果内容的长度长于 InfoWindow 默认高度 (90px)，则高度不会调整。

我使用的是纯文本，没有图像。 我试过 maxWidth。 我检查了继承的 CSS。 我已将我的内容包装在一个 div 中 并将我的 CSS 应用到其中，包括 一个高度。 我什至尝试过强制 InfoWindow 使用 jQuery 调整大小 使用 domready 事件 信息窗口。

我只剩下几根头发了。这是我的 JS：

var geocoder;
var map;
var marker;

function initialize() 
  geocoder   = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(41.8801,-87.6272); 
  var myOptions = 
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  ;
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


function codeAddress(infotext,address) 
  geocoder.geocode( 'address': address , function (results, status) 
    if (status == google.maps.GeocoderStatus.OK) 
      map.setCenter(results[0].geometry.location);
      var image  = '/path-to/mapMarker.png';
      var infowindow = new google.maps.InfoWindow( content: infotext, maxWidth: 200 );
      var marker = new google.maps.Marker(
        map: map,
        position: results[0].geometry.location,
        icon: image
      );
      google.maps.event.addListener(marker, 'click', function ()  
        infowindow.open(map, marker); 
      );
    
  );



function checkZipcode(reqZip) 

  if ( /[0-9]5/.test(reqZip) ) 

    $.ajax(
      url: 'data.aspx?zip=' + reqZip,
      dataType: 'json',
      success: function(results) 

        $.each(results.products.product, function() 

          var display = "<span id='bubble-marker'><strong>"+this.name+"</strong><br>"+
                        this.address+"<br>"+
                        this.city+", "+this.state+" "+this.zip+"<br>"+
                        this.phone+"</span>";

          var address = this.address+","+
                        this.city+","+
                        this.state+","+
                        this.zip;

          codeAddress(display,address);

        );

      ,
      error: function()  $('#information-bar').text('fail'); 
    );

   else  $('#information-bar').text('Zip codes are five digit numbers.'); 



$('#check-zip').click(function()  $('#information-bar').text(''); checkZipcode($('#requested-zipcode').val()); );

initialize();

InfoText 和 Address 来自 XML 文件的 AJAX 查询。数据不是问题，因为它总是正确地通过。在检索和格式化数据后调用 codeAddress()。

文件中的html：

<div id="google_map"> <div id="map_canvas" style="width:279px; height:178px"></div> </div>

我的 InfoWindow 内容的 CSS（没有其他 CSS 应用于地图）：

#bubble-marker font-size:11px; line-height:15px; 

【问题讨论】：

您找到解决方案了吗？我遇到了完全相同的问题...

我也无法解决这个问题，为了我的头发和理智，最终我只是重新设计了我想做的事情。很想知道是否有解决方案...

【参考方案1】：

这并不是一个真正的答案（daveoncode 创建 DOM 节点并将其用作内容的解决方案是正确的），但如果您需要在设置后动态更改内容（例如使用 jQuery），那么您可以强制 gmail 调整信息窗口：

infoWindowLinea.setContent(infoWindowLinea.getContent());

【参考方案2】：

只需用 div 包裹你的内容并指定它的高度：<div style="height:60px">...</div>，例如

 myMarker.setContent('<div style="height:60px">' + txt + '</div>');

- 就我而言，这已经足够了。

【参考方案3】：

只需使用带有 padding-bottom: 30px 的 DIV 包装 InfoBox 内容；

JS：

map_info_window = new google.maps.InfoWindow();      
var $content = $('<div class="infobox">').html(content);
map_info_window.setContent($content.get(0));
map_info_window.open(map, marker);

CSS：

.infobox
    padding-bottom: 30px;

【参考方案4】：

我终于找到了一个可行的解决方案。不像我希望的那样灵活，但它非常好。从根本上说，关键点是：不要使用字符串作为窗口内容，而是使用 DOM 节点。 这是我的代码：

// this dom node will act as wrapper for our content
var wrapper = document.createElement("div");

// inject markup into the wrapper
wrapper.innerHTML = myMethodToGetMarkup();

// style containing overflow declarations
wrapper.className = "map-popup";

// fixed height only :P
wrapper.style.height = "60px";

// initialize the window using wrapper node     
var popup = new google.maps.InfoWindow(content: wrapper);

// open the window
popup.open(map, instance);

以下是 CSS 声明：

div.map-popup 
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;

ps：“instance”指的是 google.maps.OverlayView（我正在扩展）的当前自定义子类

【讨论】：

这很棒。您可以使用jQuery('<div>...</div>').get(0)

制作 DOM 节点

【参考方案5】：

您的地图画布太小。增加 <div id="map_canvas"> 元素的宽度/高度，您应该会自动看到更大的 InfoWindows。

也就是说，我在我正在构建的网站上遇到了同样的问题。我通过创建一个包含 InfoWindow 内容的克隆 div 来解决它，测量该 div 的宽度和高度，然后将 InfoWindow 内容 div 设置为具有该测量的宽度和高度。这是移植到您的 codeAddress 函数中间的代码（另请注意，我从您的 InfoWindow 声明中删除了maxWidth: 200）：

function codeAddress(infotext,address) 
    geocoder.geocode( 'address': address , function (results, status) 
        if (status == google.maps.GeocoderStatus.OK) 
            map.setCenter(results[0].geometry.location);

            // Create temporary div off to the side, containing infotext:
            var $cloneInfotext = $('<div>' + infotext + '</div>')
                .css(marginLeft: '-9999px', position: 'absolute')
                .appendTo($('body'));

            // Wrap infotext with a div that has an explicit width and height, 
            // found by measuring the temporary div:
            infotext = '<div style="width: ' + $cloneInfotext.width() + 'px; ' +
                'height: ' + $cloneInfotext.height() + 'px">' + infotext + 
                '</div>';

            // Delete the temporary div:
            $cloneInfotext.remove();

            // Note no maxWidth defined here:
            var infowindow = new google.maps.InfoWindow( content: infotext ); 
            var marker = new google.maps.Marker(
                map: map,
                position: results[0].geometry.location
            );
            google.maps.event.addListener(marker, 'click', function ()  
                infowindow.open(map, marker); 
            );
        
    );