Question

因此，作为作业的一部分，我们必须使用Google Maps API设计地图，该地图需要使用多个infowindows和自定义标记。我已经管理了前两个，但我似乎在与图像挣扎？我可以简单地将图像添加到数组中，如果是这样，我该如何正确格式化？

这是我目前的代码

//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);

Answer 1

您可以将图像添加到阵列中。那没关系。

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));

JSFiddle demo

请注意，我已将您的主要功能名称从initialise更改为initialize，并将元素ID从mapArea映射到map-canvas。 < / p>

将图像添加到多个谷歌地图信息窗口

1 个答案: