当我点击Google地图v3中的标记(邦迪海滩)时,如何将图像放在弹出窗口中? :
这里是代码:
var locations = [
// Here I would put the Image ['Bondi Beach', -33.890542, 151.274856, 4],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(46.713251, 7.833252),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
map.setOptions({styles: styles});
var infowindow = new google.maps.InfoWindow();
var marker, i;
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
答案 0 :(得分:0)
试试这个:
<div id="map" style="width:500px;height:500px;"></div>
脚本:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 'http://www.destination360.com/australia-south-pacific/australia/images/s/australia-bondi-beach.jpg'],
/*
add more locations here on the form :
[ name, lat, long, img ]
[ name, lat, long, img ]
..
*/
];
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(-33.890542, 151.274856),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var content=locations[i][0]+'<br><img src="'+locations[i][3]+'" style="width:300px;">';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
结果: