2

デフォルトの infoWindow のサイズは、私には大きすぎます。もっと小さくしたいのですが、やり方がわかりません。このようにコンストラクターにmaxWidthパラメーターを設定しようとしましたinfoWindow

    var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});

このようにCSS幅を設定します

<style type="text/css">
#infoWindow {
    width: 10px;
}
</style>

しかし、それは実際のボックスではなく、テキストの折り返しのサイズを変更するだけのようです。infoWindowボックスのサイズを変更するにはどうすればよいですか?

これが私のコードです。

<!doctype html>
<html lang="en">
<head>
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <style type="text/css">
    #infoWindow {
        width: 10px;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
    <script type="text/javascript">

    var cityList = [
    ['Chicago', 41.850033, -87.6500523, 1],
    ['Illinois', 40.797177,-89.406738, 2]
    ];

    var demoCenter = new google.maps.LatLng(41,-87);

    var map;
    function initialize()
    {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 7,
            center: demoCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        addMarkers();
    }

    function addMarkers()
    {
        var marker, i;
        var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
        for (i = 0; i < cityList.length; i++)
        {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                map: map,
                title: cityList[i][0]
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                var contentString = '<div id="infoWindow">'
                    +'<div id="bodyContent">'
                    +'<p>'
                    + "This location is:<br>"
                    + marker.title
                    +'</p>'
                    +'</div>'
                    + '</div>';
                return function() {
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                }
                })(marker, i));
            }
        }

</script>
    </head>
    <body onload="initialize()">
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>
    </body>
</html>
4

2 に答える 2

4

ネイティブの infoWindow には最小サイズがあります。大きすぎる場合は、 infoBubbleやInfoBoxなどの代替ソリューションの使用を検討する必要があります。

于 2012-08-24T05:59:26.493 に答える
1

  1. var infoWindowと同じではないため、CSSセクションは何もしません<div id="infoWindow">

  2. ドキュメントには次のように記載されています。

maxWidth : コンテンツの幅に関係なく、情報ウィンドウの最大幅。この値は、open の呼び出しの前に設定されている場合にのみ考慮されます。コンテンツを変更するときに最大幅を変更するには、close、setOptions、および open を呼び出します。

また、ラリー (geocodezip) が言ったこと。(彼は私より速くタイプします) ;-)

于 2012-08-24T06:05:07.797 に答える