谷歌地图v3更改infowindow的大小 [英] google maps v3 change size of infowindow

问题描述

我想设置一个infowindow的大小以适应内部的内容。标准infowindow太宽我试图使用maxWidth，但它似乎不工作。调整infowindow的最佳方式是什么？

I would like to set the size of an infowindow to fit the content inside. The standard infowindow is too wide I tried to use maxWidth but it doesn't seem to work. What is the best way to resize an infowindow?

查看代码：

see code:

    window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);

将会在气泡中显示的信息如下所示（\\\
表示下一行）

the information that will be displayed in the bubble looks like this( \n means next line)

NY \\\
total 60 \\\
2009：10 \\\
2010：20 \\\
2011：30

NY \ntotal 60 \n2009: 10 \n2010: 20 \n2011: 30

推荐答案

你想要做的是用你自己的标准Google地图infoWindow来替换，并将你的内容放入其中。一旦你替换了标准的GM infoWindow，你就有很大的自由度。我做的是这样的：

What you want to do is replace the "standard" Googlemaps infoWindow with your own, and put your content into it. Once you replace the standard GM infoWindow, you have a lot of latitude to work with. What I did is this:

添加一个名为#infoWindow的新样式ID，并设置其宽度。

Add a new style ID called #infoWindow, and set its width.

#infoWindow {
    width: 150px;
}

在Javascript中的任何函数之外，我创建一个新的infoWindow：

Outside of any functions within my Javascript, I create a new infoWindow:

var infoWindow = new google.maps.InfoWindow();

在函数中创建一个新的var，用于设置标记显示的信息，并设置它的价值在于：

Create a new var within the function that sets the information displayed by the marker(s), and set its value to the content:

var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';

使用您在别处创建的位置信息调用createMarker函数，并将html var包含为一个：b
$ b

Call the createMarker function using the location information you would have created elsewhere, and include the html var as one of the arguments:

var marker = createMarker(point,name,html);

您将在其他位置声明的createMarker函数会将所有信息放在一起，您的地图，并在点击时显示上述信息：

The createMarker function you would declare elsewhere, which would bring all of the information together, display the marker on your map, and display the information above when it's clicked on:

function createMarker(latlng,name,html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: name
        });

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(contentString); 
        infoWindow.open(map,marker);
        });
}

这篇关于谷歌地图v3更改infowindow的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！