谷歌地图infoWindow显示文字为白色,可以突出显示内容

时间:2015-07-26 04:55:48

标签: javascript google-maps google-maps-api-3 meteor

我使用本教程设置我的地图:http://meteorcapture.com/how-to-create-a-reactive-google-map/

我将此示例用于infoWindow:https://developers.google.com/maps/documentation/javascript/infowindows

我正在尝试在用户点击标记时显示任务的标题。 infoWindow显示,但文本为白色,只有突出显示才能读取。我试着用Google搜索,但我找不到类似的东西。

我使用Meteor进行开发

相关代码:

<div align = 'center' class = 'map-container' id = 'map'>
        {{> googleMap name = 'map' options = mapOptions}}
</div>


Template.currentTasks.onCreated(function() {
    GoogleMaps.ready('map', function(map) {
        Tasks.find().forEach(function(task) {
            if (task.location != null) {
                var marker = new google.maps.Marker({
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: task.location,
                    map: map.instance,
                    title: task.title,
                    id: document._id
                });

                var infoWindow = new google.maps.InfoWindow({
                    content: task.title
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.open(map.instance, marker);
                });   
            }
        })
    });

});

mapOptions: function() {
        if (GoogleMaps.loaded()) {
            return {
                //union lat lng is below, using wellesley for testing rn
                // center: new google.maps.LatLng(42.8177427, -73.9305222),
                center: new google.maps.LatLng(42.3170368, -71.2751508),
                zoom: 14
            };
        }
    }

我在嵌入地图的模板的onRendered函数中调用GoogleMaps.load()。

无论我放入文本字​​段,无论是硬编码还是其他对象,infoWindow都会显示为白色文本。

1 个答案:

答案 0 :(得分:-1)

在CSS中找到rgb(255,255,255){或接近它}的颜色设置。与语义 - ui倒置对象相关的东西。为了解决这个问题,我在.ui.primary.inverted.segment下注释了第640行。

color(255,255,255...

我没有注意到我的项目中其他倒置部件有任何变化,但我可能没有使用相同的倒置设计。