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

Question

我是 Javascript 的新手，我用这个创建了 Google 地图： Using MySQL and PHP with Google Maps 和 MarkerClusterer。

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

问题是：对于所有标记，它显示的内容与我的 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'});

                }); 
    }

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

Answer 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

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

Display the content associated at each marker in a infowindow using MarkerClusterer

javascript

google-maps

google-maps-api-3

infowindow

markerclusterer