标记内容（信息窗口）谷歌地图

Question

我正在尝试在Google地图上为多个标记添加infoWindow。 我最接近的做法是在所有标记上显示数组中最后一个地址的infoWindow。 我贴下面的代码片段不起作用，我得到一个“Uncaught TypeError：Cannot read property '4' of undefined”错误。 我确定这是一个范围问题，但我在这里一直打转，需要一些帮助：

var hotels = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 4, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3AW','([phone]','([phone]','[e-mail]','http://www.booknowaddress.com'],
            ['ETAP Birmingham Airport', 52.452527, -1.731644, 3, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3QL','([phone]','([phone]','[e-mail]','http://www.booknowaddress.com'],
            ['ibis Birmingham City Centre', 52.475162, -1.897208, 2, 'Ladywell Walk<br />Birmingham<br />B5 4ST','([phone]','([phone]','[e-mail]','http://www.booknowaddress.com']
        ];

        for (var i = 0; i < hotels.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
                map: map,
                icon: image,
                title: hotels[i][0],
                zIndex: hotels[i][2]
            });

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function () {
                var markerContent = hotels[i][4];
                infoWindow.setContent(markerContent);
                infoWindow.open(map, this);
            });
        }

提前感谢。

- DarrylGodden

---

将 var marker = ... 更改为 let marker = ...，并将 var infoWindow = ... 更改为 let infoWindow = ... - Pierre

Answer 1

我们已经解决了这个问题，虽然我们并没有想到将addListener放在for循环之外会产生任何影响，但事实证明确实如此。以下是解决方案：

创建一个包含信息窗口(infoWindow)信息的新函数：

function addInfoWindow(marker, message) {

            var infoWindow = new google.maps.InfoWindow({
                content: message
            });

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.open(map, marker);
            });
        }

然后使用数组ID和您想要创建的标记调用该函数：

addInfoWindow(marker, hotels[i][3]);

- DarrylGodden

---

我查看了很多SO答案来回答这个问题的变种。你的答案最清晰。谢谢。 - ZMorek

@DarrylGodden... 谢谢您提供的有关信息窗口的信息。 - RED.Skull

info变量有什么作用？ - Ben Taliadoros

原因是最初它没有起作用的原因是您创建了一个事件监听器回调，该回调将具有不同的范围。尽管它正在创建一个具体的“i”，但我怀疑它仍然试图从回调函数中访问“hotels”，但由于hotel是一个“var”，因此只能在父函数中访问。 - MultiMat

Answer 2

虽然这个问题已经有了答案，但我认为这种方法更好：http://jsfiddle.net/kjy112/3CvaD/（提取自StackOverFlow上的google maps - open marker infowindow given the coordinates问题）。每个标记都有一个“信息窗口”条目：

function createMarker(lat, lon, html) {
    var newmarker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        title: html
    });

    newmarker['infowindow'] = new google.maps.InfoWindow({
            content: html
        });

    google.maps.event.addListener(newmarker, 'mouseover', function() {
        this['infowindow'].open(map, this);
    });
}

- BenC

---

+1 这个非常好用！！你不能使用infowindow的自定义属性进行初始化，但是显然你可以创建'infowindow'键...很高兴它能够工作。谢谢！ - Nathaniel Rogers

我们可以自定义工具提示的样式吗？ - Sachin HR

@SachinHR：请查看https://developers.google.com/maps/documentation/javascript/reference/3.exp/info-window，虽然我没有尝试过，但您可以在内容中注入任何样式的HTML，并使用CSS进行样式设置。您可以通过标记查看https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker来更改图标。 - BenC

在特定的标记上悬停时，是否可以同时显示图片和名称？ - Sachin HR