Question

这是我的Google地图代码，可创建标记的信息窗口并将其宽度限制为200px。一切正常：

                    google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(this.html);
                    infowindow.setOptions({maxWidth:200}); 
                    infowindow.open(map, this);
                    });

现在我需要在infow窗口中添加一个类，以便我可以使用CSS设置它。从谷歌地图文档似乎boxClass是我需要的，但以下不添加类。我有语法错误吗？

                    google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(this.html);
                    infowindow.setOptions({boxClass:'myGoogleClass'});
                    infowindow.open(map, this);
                    });

Answer 1

你不能使用带有boxClass的infowindow。您必须使用infoBox组件。如果你将infowindow更改为信息框，它将正常工作。

 var marker = new google.maps.Marker({
         map: theMap,
         draggable: true,
         position: new google.maps.LatLng(49.47216, -123.76307),
         visible: true
        });

        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "280px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
        ib.open(theMap, marker);

以上代码取自here

使用infowindow时唯一可以设计的是内容，而不是窗口本身

boxClass for Google Maps无效？

1 个答案: