Question

我正在使用谷歌地图构建地图，我遇到了问题。我尝试设置一个用户点击针脚时打开的信息窗口。我的问题是它实际上有效但它在窗口本身的父div上呈现出奇怪的效果（当有人在我的窗口上多次点击时，窗口显示一个奇怪的白色边框，这是背景的颜色我的div的父亲，有一类gm-style-iw）。

我的代码如下：

我的JAVASCRIPT：

function initMap() {

        var styledMapType=new google.maps.StyledMapType([{my custom style}]);

        var mycompany = {lat: 44.348534, lng: -79.669197};

        var map = new google.maps.Map(document.getElementById('map'), {
            center: mycompany,
            zoom: 14,
            scrollwheel: false,
            mapTypeControl: false
        });

        map.mapTypes.set('styled_map', styledMapType);
        map.setMapTypeId('styled_map');

        var contentString = '<div class="iw-content">' + '<div class="iw-subTitle">My company </div>' + '<p>455 street</p>' + '<p>City, World</p>' + '<p>Canada, Postalcode</p>' + '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: mycompany,
            map: map,
            title: 'My company'
        });



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

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });

        google.maps.event.addListener(infowindow, 'domready', function() {

            var iwOuter = $('.gm-style-iw');

            var iwBackground = iwOuter.prev();

            iwBackground.children(':nth-child(2)').css({'background' : '#252525'});

            var iwmain = iwBackground.children(':nth-child(2)');

            iwBackground.children(':nth-child(4)').css({'display' : 'none'});

            var iwCloseBtn = iwOuter.next();

        });
    }
    initMap();

我的CSS：

#map .gm-style-iw {
  background-color: #252525;
  padding: 2% 11%;
}
#map .iw-content p {
  color: #a5a5a5;
}
#map .iw-subTitle {
  color: white;
  font-size: 16px;
  font-weight: 700;
  padding: 5px 0;
}

另外，我想在地图底部设置奇怪的三角形，因为背景的原生颜色也是白色。

我要添加图片来解释我的问题更好

提前感谢您的任何帮助

Answer 1

您需要使用以下CSS属性来正确设置信息窗口的样式：

          /*style the box which holds the text of the information window*/  
         .gm-style .gm-style-iw {
            background-color: #252525 !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 120px !important;
            padding-top: 10px;
            display: block !important;
         }    

         /*style the paragraph tag*/
         .gm-style .gm-style-iw #google-popup p{
            padding: 10px;
         }


        /*style the annoying little arrow at the bottom*/
        .gm-style div div div div div div div div {
            background-color: #252525 !important;
            margin: 0;
            padding: 0;
            top: 0;
            color: #fff;
            font-size: 16px;
        }

        /*style the link*/
        .gm-style div div div div div div div div a {
            color: #f1f1f1;
            font-weight: bold;
        }

JSfiddle示例：http://jsfiddle.net/hLenqzmy/18/

Answer 2

我强烈建议您在此处使用Snazzy Info Window。接受的答案建议使用一种非常骇人听闻且未记录的方法，一旦Google更新其结构，该方法可能会中断。

使用Snazzy Info窗口，您只需指定属性，然后甚至使用SCSS即可自定义样式：

let map = new google.maps.Map(document.getElementById('map-canvas'));

let latLng = new google.maps.LatLng(1, 1);

let marker = new google.maps.Marker({
    position: latLng,
    map: map
});

let headline = 'Amazing Location';
let content = 'Put your great great content here';

let info = new SnazzyInfoWindow({
    marker: marker,
    content: `<h1>${headline}</h1><span class="info-content">${content}</span>`,
    closeOnMapClick: false,
    pointer: false,
    shadow: false,
});

然后添加您的SCSS：

$si-content-bg: #000;

有关更多样式选项，请参见https://github.com/atmist/snazzy-info-window/blob/master/examples/scss-styles/styles.scss，有关完整示例，请参见here。

这是2018年的员工，无需覆盖10倍嵌套div来击败自己。

googlemaps信息窗口的自定义样式（背景）

2 个答案: