我的 Google 地图信息窗口中的超链接未正确显示
Hyperlink inside of my Google map InfoWindow is not showing properly
link 可以使用,但不会显示,除非我将其突出显示,然后我才能看到文本。
这些是多重标记。
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]
];
这是信息 Window 内容。
我的所有 3 个 link 都是不可见的,除非我突出显示它们。
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>']
];
我已将它们从 header 中删除,删除并添加了 single/double 引号。我错过了什么吗?
文本似乎不是不可见的,而是文本颜色设置为白色。尝试为信息 window 明确指定文本颜色,例如:
.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>
link 可以使用,但不会显示,除非我将其突出显示,然后我才能看到文本。
这些是多重标记。
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]
];
这是信息 Window 内容。 我的所有 3 个 link 都是不可见的,除非我突出显示它们。
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>']
];
我已将它们从 header 中删除,删除并添加了 single/double 引号。我错过了什么吗?
文本似乎不是不可见的,而是文本颜色设置为白色。尝试为信息 window 明确指定文本颜色,例如:
.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>