Javascript 将图像添加到多个google地图信息窗口

因此，作为任务的一部分，我们必须使用GoogleMapsAPI设计地图，该API需要使用多个信息窗口和自定义标记。我已经处理了前两个问题，但我似乎在与图像作斗争？我可以简单地将图像添加到数组中吗？如果可以，如何正确格式化

这是我目前的代码

//Beginning of Function
function initialise() {

        //Get mapArea in HTML, create map based around latlong
        var map = new google.maps.Map(document.getElementById('mapArea'), {
            zoom: 16,
            center: new google.maps.LatLng(53.470639, -2.238996),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //add array of locations and markers
        var locations = [
            ['Geoffrey Manton Building', 53.469272, -2.237179,'http://labs.google.com/ridefinder/images/mm_20_purple.png'],
            ['All Saints Building', 53.471086, -2.238541,'http://labs.google.com/ridefinder/images/mm_20_red.png'],
            ['Business and Law Schools', 53.470575, -2.239673,'http://labs.google.com/ridefinder/images/mm_20_green.png'],
            ['John Dalton', 53.471964, -2.240392,'http://labs.google.com/ridefinder/images/mm_20_blue.png'],
        ];

        //declare variable marker as i
        var marker, i;

        //Declare new infowindow for locations
        var infowindow = new google.maps.InfoWindow();

        //add marker to each location
        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,
                icon: locations[i][3]
            });

            //Create marker functionality, allow infowindow opening
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
    google.maps.event.addDomListener(window, 'load', initialise);

//函数的开头
函数初始化（）{
//获取HTML中的mapArea，创建基于latlong的地图
var map=new google.maps.map（document.getElementById（'mapArea'）{
缩放：16，
中心：新google.maps.LatLng（53.470639，-2.238996），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//添加位置和标记的数组
变量位置=[
[杰弗里·曼顿大厦，53.469272，-2.237179，'http://labs.google.com/ridefinder/images/mm_20_purple.png'],
[“圣徒大厦”，53.471086，-2.238541，'http://labs.google.com/ridefinder/images/mm_20_red.png'],
[“商学院和法学院”，53.470575，-2.239673，'http://labs.google.com/ridefinder/images/mm_20_green.png'],
[John Dalton'，53.471964，-2.240392，'http://labs.google.com/ridefinder/images/mm_20_blue.png'],
];
//将变量标记声明为i
var标记，i；
//为位置声明新的信息窗口
var infowindow=new google.maps.infowindow（）；
//将标记添加到每个位置
对于（i=0；i

您可以将图像添加到阵列中。那很好

var locations = [
    ['Geoffrey Manton Building', 53.469272, -2.237179, 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 'http://placehold.it/100x100'],
    ['All Saints Building', 53.471086, -2.238541, 'http://labs.google.com/ridefinder/images/mm_20_red.png', 'http://placehold.it/100x200'],
    ['Business and Law Schools', 53.470575, -2.239673, 'http://labs.google.com/ridefinder/images/mm_20_green.png', 'http://placehold.it/100x50'],
    ['John Dalton', 53.471964, -2.240392, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 'http://placehold.it/200x200']];

然后，使用阵列中需要的任何HTML标记和信息构建infowindow内容：

google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {

        var html = '<h4>' + locations[i][0] + '</h4>';
        html += '<img src="' + locations[i][4] + '" />';

        infowindow.setContent(html);
        infowindow.open(map, marker);
    }
})(marker, i));

google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
var html=''+位置[i][0]+''；
html+=''；
setContent（html）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；

---

请注意，我已将您的主函数名从

initialise

更改为

initialize

，并将元素id从

mapArea

映射到

MapCanvas

您希望在何处添加这些图像？它应该是标记图标还是添加到信息窗口？@MrUpsidown在信息窗口中