-1
我正在創建一個包含多個信息窗口的折線圖。我希望信息窗口包含一個圖像（每個信息窗口都有一個不同的圖像）並通過網址進行點擊。我繪製了標記（帶有URL）和infowindows，但我無法讓圖像彈出（在infowindow中）。如何使用多個信息窗口和圖像在Google Api中創建地圖？
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
font-family: Arial, sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 38.6530169, lng: -90.3835485},
zoom: 6,
styles: [
{elementType: 'geometry', stylers: [{ color: '#ebe3cd'}]},
{elementType: 'labels', stylers: [{visibility: 'off'}]},
{elementType: 'labels.text.fill',stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry',
stylers: [{ 'visibility': 'off'}]
},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{ color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
stylers: [{'visibility': 'off'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{ color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'administrative.neighborhood',
stylers: [{visibility: 'off'}]
},
{
featureType: 'administrative.province',
elementType: 'geometry',
stylers: [{visibility: 'on'},{weight: '1.5'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
stylers: [{visibility: 'off'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{ color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
stylers: [{visibility: 'off'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road',
elementType: 'labels.icon',
stylers: [{visibility: "off"}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit',
stylers: [{visibility: 'off'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
]
});
var locations = [
['August 20, 1832',40.423731,-83.8944137, 3,'dunihue.jpg','www.google.com'],
['September 20, 1832', 40.1489329, -84.3119643, 2],
['October 1, 1832', 39.7520154,-85.603323, 1],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
var html = '<h4>' + locations[i][0] + '</h4>';
html += '<img src="' + locations[i][4] + '" />';
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var flightPlanCoordinates = [
{lat: 40.423731, lng: -83.8944137},
{lat: 40.1489329, lng: -84.3119643},
{lat: 40.1066821, lng: -84.6497071},
{lat: 39.8379723, lng: -84.958815},
{lat: 39.7797003, lng: -86.2728364},
{lat: 39.6415502, lng: -86.8738581},
{lat: 39.4650324, lng: -87.4433594},
{lat: 38.9809128, lng: -89.143966},
{lat: 36.8811974, lng: -94.9064899}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#340684',
strokeOpacity: .5,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBI8ub80FYP5f06rn2yxwNgJW55L3NEOlM&v=3&callback=initMap">
</script>
</body>
</html>
在發佈的代碼中沒有「映射」。請描述您遇到的問題或錯誤，併發布證明該問題的[mcve]。 – geocodezip
我已經添加完整的代碼。我繪製了標記（帶有URL）和信息窗口，但我無法顯示圖像（在信息窗口中）。 – mxm1301