使用MarkerClusterer显示infowindow中每个标记关联的内容

时间:2017-05-24 16:59:58

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

我是Javascript的新手,我使用以下方法创建了Google地图: Using MySQL and PHP with Google Maps和MarkerClusterer。

经过几个小时的研究,它运作良好,但我还是有问题。我需要点击每个标记来获得信息。所以,我在for for circle中添加了一个事件监听器。

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

                }); 
    }

任何建议,将非常感谢,谢谢: - )

1 个答案:

答案 0 :(得分:0)

创建新标记时,将其描述保存在其中。

  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