使用 MarkerClusterer 在信息窗口中显示与每个标记关联的内容答案

【问题标题】：Display the content associated at each marker in a infowindow using MarkerClusterer使用 MarkerClusterer 在信息窗口中显示与每个标记关联的内容
【发布时间】：2017-10-25 03:52:06
【问题描述】：

我是 Javascript 新手，我已经使用它创建了一个谷歌地图： Using MySQL and PHP with Google Maps 和 MarkerClusterer。

经过几个小时的研究，它运行良好，但我仍然有一个问题。我需要在每个标记上单击一个信息窗口。所以，我在我的 for 圈子中添加了一个事件监听器。

问题是：对于所有标记，它显示的内容与我的 xml 文件最后一行的内容相同。

这里是代码：

    function initMap()
    {
              var map = new google.maps.Map(document.getElementById('map'), {
                center: new google.maps.LatLng(48.85, 2.4),
                zoom: 6
              });
                //taille de la fenêtre d'information
                var infoWindow = new google.maps.InfoWindow({
                        maxWidth: 400
                      });

                // Change this depending on the name of your PHP or XML file
                downloadUrl(sourcexml, function(data)
                {
                var xml = data.responseXML;
                var clusteredmarkers = [];
                var markers = xml.documentElement.getElementsByTagName("marker");

                        for (var i = 0; i < markers.length; i++)
                        {
                                  var idcart = markers[i].getAttribute('id');
                                  var name = markers[i].getAttribute("titre");
                                  var description = markers[i].getAttribute("description");
                                  var type = markers[i].getAttribute("categorie");
                                  var point = new google.maps.LatLng(
                                      parseFloat(markers[i].getAttribute("lat")),
                                      parseFloat(markers[i].getAttribute("lng")));


                                  var image = customImage[type] || {};
                                  var marker = new google.maps.Marker({
                                    map: map,
                                    position: point,
                                    icon: image.image,
                                    title: name
                                  });


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

                                  clusteredmarkers.push(marker);

                        }

                         var markerCluster = new MarkerClusterer(map,clusteredmarkers,{imagePath: 'images/m/m'});

                }); 
    }

任何建议，将不胜感激，谢谢:-)

【问题讨论】：

标签： javascript google-maps google-maps-api-3 infowindow markerclusterer

【解决方案1】：

当您创建新标记时，将其描述保存在其中。

  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: image.image,
    title: name,
    description: description
  });

在addListener 中使用保存在被点击的标记中的描述。

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

如果您想了解该 for 循环中发生的情况，请阅读以下内容： JavaScript closure inside loops – simple practical example

【讨论】：