php - 我的 Google map InfoWindow 内的超链接未正确显示

Question

该链接有效，但不会显示，除非我突出显示它然后我可以看到文本。

这些是多个标记。

    var markers = [
        ['Joe Brown Park, New Orleans', 29.993345,-90.098104],
        ['City Park, New Orleans', 30.030401,-89.966602],
        ['Palace of Westminster, London', 30.020819,-90.040573]
    ];

这是信息窗口内容。 我的所有 3 个链接都是不可见的，除非我突出显示它们。

    var infoWindowContent = [

        [
        '<h3>"Named after 1 of the states largest independent oil producers, this park offers year-round events."</h3>' +
        '<h3></h3>' +
        '<h3><a href="http://nordc.org/parks/joe-w-brown-park/">Joe Brown Park</a></h3>' +
        '</div>'],
        [
        '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' +
        '<h3></h3>' +
        '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' +
        '</div>'],
         [
        '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' +
        '<h3></h3>' +
        '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' +
        '</div>']

    ];

我已将它们从标题中删除，删除并添加了单/双引号。我错过了什么吗？

Answer 1

看起来文本不是不可见的，而是文本颜色设置为白色。尝试显式指定信息窗口的文本颜色，例如:

.gm-style .gm-style-iw, .gm-style .gm-style-iw a {
    color: #000;
}

示例

function initMap() {
    var uluru = { lat: 29.993345, lng: -90.098104 };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: uluru
    });


    var markers = [
        ['Joe Brown Park, New Orleans', 29.993345, -90.098104],
        ['City Park, New Orleans', 30.030401, -89.966602],
        ['Palace of Westminster, London', 30.020819, -90.040573]
    ];

    var infoWindowContent = [
         [
         '<h3>"Named after 1 of the states largest independent oil producers, this park offers year-round events."</h3>' +
         '<h3></h3>' +
         '<h3><a href="http://nordc.org/parks/joe-w-brown-park/">Joe Brown Park</a></h3>' +
         '</div>'],
         [
         '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' +
         '<h3></h3>' +
         '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' +
         '</div>'],
          [
         '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' +
         '<h3></h3>' +
         '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' +
         '</div>']
    ];

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


    markers.forEach(function (markerInfo, i) {
        markerInfo.content = infoWindowContent[i][0];
        createMarker(map,infowindow, markerInfo);
    });
  
}


function createMarker(map,infoWindow,info) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(info[1], info[2]),
        map: map,
        title: info[0]
    });
    marker.addListener('click', function () {
        infoWindow.setContent(info.content);
        infoWindow.open(map, marker);
    });
    return marker;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

.gm-style .gm-style-iw, .gm-style .gm-style-iw a {
    color: #000;
}

<div id="map"></div>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>