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

标签 javascript google-maps google-maps-api-3

因此,作为作业的一部分,我们必须使用 Google Maps API 设计 map ,该 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);

最佳答案

您可以将图像添加到阵列中。这样就好了。

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 标记和信息构建信息窗口内容:

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

关于javascript - 将图像添加到多个谷歌地图信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29771959/

相关文章:

java - import com.google 无法解析

javascript - 自动更新 Google map Javascript API 上的标记位置

html - Google map 不会显示在 Phonegap iOS 应用程序中

android - 静态谷歌地图 : Is it possible to add Text to the Marker

javascript - 如何在 jQuery 文档就绪函数中使用模块中的(全局)变量?

javascript - 从 ES6 类构造函数返回 ES6 Proxy

javascript - 如何将一个类更改为所有div?

php - javascript 和 php 中的功能相同,但输出不同

javascript - 谷歌地图功能

javascript - 如何删除谷歌地图API中的方向标记