javascript - 标记内容(信息窗口)谷歌地图

标签 javascript google-maps google-maps-markers infowindow

我正在尝试将 infoWindow 添加到 Google map 上的多个标记。我最接近的是获取一个 infoWindow 以在所有标记上显示您在数组中可以看到的最后一个地址。我在下面粘贴的代码不起作用,我收到“未捕获的类型错误:无法读取未定义的属性‘4’”。我确定这是一个范围问题,但我在这里兜圈子,需要一些帮助:

var hotels = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 4, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3AW','(+44)1217805800','(+44)1217805810','info@ibisbhamairport.com','http://www.booknowaddress.com'],
            ['ETAP Birmingham Airport', 52.452527, -1.731644, 3, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3QL','(+44)1217805858','(+44)1217805860','info@etapbhamairport.com','http://www.booknowaddress.com'],
            ['ibis Birmingham City Centre', 52.475162, -1.897208, 2, 'Ladywell Walk<br />Birmingham<br />B5 4ST','(+44)1216226010','(+44)1216226020','info@ibisbhamcity.com','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);
            });
        }

感谢期待。

最佳答案

我们已经解决了这个问题,虽然我们不认为在 for 之外添加 addListener 会产生任何影响,但看起来确实如此。答案如下:

使用您的信息为其中的 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]);

关于javascript - 标记内容(信息窗口)谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5868903/

相关文章:

google-maps - Flutter GoogleMaps - 自定义标记的动态着色

jquery - 从 PHP 返回的 JSON 未由 jQuery.each() 正确处理以在 Google map 上显示为新标记

javascript - 为什么我的 React 组件在每次操作后都会安装?

javascript - 如何从 php 调用 javascript 函数

javascript - 使用外部 JSON 文件填充 D3 图表

iphone - 在 map View 中实现获取方向

javascript - 如何为 Google map 正确设置此 JavaScript 数组/对象的格式?

google-maps - Ionic 3 Google map - map 不显示在 android 上

android - 我怎样才能使我的 InfoWindows 运行得更快?

javascript - 解决方法:将 JavaScript 中 4 个或更少字母的字符串转换为大写,将 4 个或更多字母转换为小写