我正在尝试创建一个包含多个标记的折线的地图，每个标记都有自己的点击通过网址和信息窗口。我已将网址插入到标记信息中，但每次测试时都会收到错误消息。我希望也能将图像添加到信息窗口.-（404 Not Found）
<!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,10,"https://www.google.com/"],
['September 19th,
1832',40.4237331,-83.8944137,9,"https://www.google.com/"],
['September 25th,
1832',40.1066821,-84.649707,8,"https://www.google.com/"],
['October 1st,
1832',39.8379723,-84.958815,7,"https://www.google.com/"],
['October 10th,
1832',39.6415502,-86.8738581,6,"https://www.google.com/"],
['October 14th,
1832',39.6959955,-87.9244163,5,"https://www.google.com/"],
['October 29th,
1832',37.9204684,-89.9206883,4,"https://www.google.com/"],
['November 1, 1832',
37.4986755,-90.3080368,3,"https://www.google.com/"],
['November 28th.
1832',37.2035869,-92.048218,2,"https://www.google.com/"],
['December 14th, 1832',36.8811974,
-94.9064899,1,"https://www.google.com/"],
];
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
marker.url = locations[i][4];
});
window.location.href = marker.url;
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.4237331, lng: -83.8944137},
{lat: 40.1066821, lng: -84.649707},
{lat: 39.8379723, lng: -84.958815},
{lat: 39.6415502, lng: -86.8738581},
{lat: 39.6959955, lng: -87.9244163},
{lat: 37.9204684, lng: -89.9206883},
{lat: 37.4986755, lng: -90.3080368},
{lat: 37.2035869, lng: -92.048218},
{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>
答案 0 :(得分：0)
在代码的这一部分中，假设您在每个数组元素的第四个位置定义了一个网址：
...
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
});
//-----------add this :
marker.url = locations[i][4];
...
重定向时也使用此选项：
window.location.href = marker.url;
您可能需要使用http或https前缀定义您的网址。
答案 1 :(得分：0)
Locations数组必须如下所示：
var locations = [
['August 20,1832',40.4225179,-83.884628,10,"https://www.google.com",],
['September 19th, 1832',40.4237331,-83.8944136,9,"your_url_here"],
['September 25th, 1832',40.1066821,-84.649707,8,"your_url_here"],
//... and so on
];
之后你可以尝试添加for循环：
marker.url = locations[i][4]; ///