Question

我面临着解决信息窗口大小的巨大问题。我想在信息窗口中显示一个图像块和一些文本信息，但在放置内容信息窗口大小增加后，我已经阅读了一些线程，但我的代码没有运气。任何人都可以帮我解决。

// Creating an object literal containing the properties 
// we want to pass to the map  
var options = {  
  zoom: 5,  
  center: new google.maps.LatLng(44.913990, 15.205078),  
  mapTypeId: google.maps.MapTypeId.ROADMAP ,
  };
// Creating the map  
var map = new google.maps.Map(document.getElementById("map"), options);
// Creating a LatLngBounds object
var bounds = new google.maps.LatLngBounds();
// Creating an array that will contain the coordinates 
// for New York, San Francisco, and Seattle
  var content = [];
  var places = [];content.push('Some html');
  places.push(new google.maps.LatLng(44.913990, 15.205078));
// Creating a variable that will hold 
// the InfoWindow object
var infowindow;

// Looping through the places array
for (var i = 0; i < places.length; i++)
{
  // Adding the markers
  var marker = new google.maps.Marker({
    position: places[i], 
    map: map,
    icon: "/themes/garland/images/beach_icon_gmap.png"
  //  title: "Place number " + i
  });

  // Wrapping the event listener inside an anonymous function 
  // that we immediately invoke and passes the variable i to.
  (function(i, marker) {
    // Creating the event listener. It now has access to the values of
    // i and marker as they were during its creation
    google.maps.event.addListener(marker, "click", function() {

      // Check to see if we already have an InfoWindow  
      if (!infowindow) {
        infowindow = new google.maps.InfoWindow({
            maxWidth: 20,
            maxheight: 20
        });
      }

      // Setting the content of the InfoWindow
      infowindow.setContent(content[i]);

      // Tying the InfoWindow to the marker 
      infowindow.open(map, marker);

    });

  })(i, marker);

  // Extending the bounds object with each LatLng
  bounds.extend(places[i]);
}
// Adjusting the map to new bounding box
// map.fitBounds(bounds)

非常感谢任何帮助。提前谢谢。

Answer 1

我在代码中注意到的第一件事：maxWidth是传递给InfoWindowOptions构造函数的InfoWindow ^api-doc对象的有效属性，但是{{1 }} 不是。虽然maxheight会限制宽度，但您无法将InfoWindow视为严格或严格的容器。 maxWidth的大小始终包含其提供的任何内容。来自API Doc：

InfoWindow将根据内容进行调整。设置一个内容的显式大小，将内容设置为HTML元素那个大小。

也就是说，您可以通过定义CSS类并将样式规则应用于窗口内容来控制InfoWindow的大小，显示，颜色等。对内容采用CSS方法几乎可以让您完全控制内容的大小，因为InfoWindow只是作为内容的容器。如果CSS规则导致内容尺寸正确，则InfoWindow的大小将正确。

调整谷歌地图V3的信息窗口

1 个答案: