使用信息窗口设置 Marker Clusterer 标记答案

【问题标题】：Setting up Marker Clusterer markers with info windows使用信息窗口设置 Marker Clusterer 标记
【发布时间】：2010-10-21 08:54:18
【问题描述】：

我在为 google map api 中的多个标记设置信息窗口时遇到问题。基本上，我从外部 Json 文件中获取纬度和经度以及其他所有信息。我正在正确解析它，因为标记显示在地图上。但是，当我尝试为它们中的每一个添加一个信息窗口时，它只显示最近添加的标记的信息窗口 + 每当我指向不同的标记时，它仍然会转到显示其信息窗口的最新标记。这是源代码：

  function initialize() 
  {
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("tab14"), myOptions);

    /* Sets up markers */    
    markers = []; 

      for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
      {
      //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);

        var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
             var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
              var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

        var contentString = '<div>'+
              '<div>'+
              '</div>'+
             '<h4>'+coordinates.title+'</h1>'+
              '<div>'+
              '<p>'+coordinates.excerpt+'</p>'+
                 '</div>'+
              '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

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


        markers.push(marker);
      }

      /* Sets up marker clusterer */
      var markerCluster = new MarkerClusterer(map, markers); 
  }

有人可以帮我解决这个问题吗？谢谢。

//已编辑-------------------------------------------------------- ----------

所以我已经更改了它，现在它看起来像这样：

infoWindow = new google.maps.InfoWindow();

  for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
  {
              //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);

                var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
               var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
                var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

                var contentString = '<div>'+
                                     '<div>'+
                                  '</div>'+
                                    '<h4>'+coordinates.title+'</h1>'+
                                  '<div>'+
                                     '<p>'+coordinates.excerpt+'</p>'+
                                     '</div>'+
                                  '</div>';

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

                markers.push(marker);
  }

  /* Sets up marker clusterer */
  var markerCluster = new MarkerClusterer(map, markers);

还是不行：/

【问题讨论】：

标签： php javascript google-maps-api-3

【解决方案1】：

据我所知，您只能拥有一个 InfoWindow。您应该为定义窗口内容的每个标记添加一个 onclick 事件。

我认为你应该改变：

var infowindow = new google.maps.InfoWindow({
                content: contentString
              });

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

类似于：

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

infoWindow 应该在你的 for 循环之外定义。

祝你好运！

** 编辑 **

我认为您需要为标记使用唯一名称。

这是一个工作示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;key=
    <<INSERT YOUR KEY HERE>>" type="text/javascript"></script>
<script>
function initialize() {
// Create google map
var latlng = new google.maps.LatLng(31.0293534,5.1736923);
var myOptions = {
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 1,
    backgroundColor: "#99B3CC",
    mapTypeControl: false
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow = new google.maps.InfoWindow();

/**
 * First marker
 */

var latLng = new google.maps.LatLng(31.0293534,5.1736923);
var marker1 = new google.maps.Marker({
    map: map,
    position: latLng,
    visible: true
});


google.maps.event.addListener(marker1, 'click', function() {
    infoWindow.setContent("Some content Marker 1");
    infoWindow.open(map,marker1);
});

/**
 * Second marker
 */

var latLng = new google.maps.LatLng(25.271139,55.307485);
var marker2 = new google.maps.Marker({
    map: map,
    position: latLng,
    visible: true
});
marker2.onclick = function() {
    infoWindow.setContent("Some content marker2");
    infoWindow.open(map,marker2);
};
google.maps.event.addListener(marker2, 'click', function() {
    infoWindow.setContent("Some content marker2");
    infoWindow.open(map,marker2);
}); 
}
window.onload=initialize; 
</script>

</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>

您可能需要更改密钥。但在我这里，这就像一个魅力。我能给你举个最简单的例子。

【讨论】：

【解决方案2】：

好的，我已经找到了解决方案。这有点像黑客，但它对我有用。我把它放在这里以防其他人需要它：

    <script type="text/javascript">

  /* Sets up the map with markers */
  function initialize() 
  {
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("tab14"), myOptions);

      /* Sets up markers */    
         markers = []; 

      infoWindow = new google.maps.InfoWindow();              

      for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
      {              

                    var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
                   var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
                    var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

                    var contentString = '<div>'+
                                        '<h4>'+coordinates.title+'</h1>'+
                                      '<div>'+
                                         '<p>'+coordinates.excerpt+'</p>'+
                                         '</div>'+
                                      '</div>';

                  addMarker(marker, contentString);
                    markers.push(marker);
      }

      /* Sets up marker clusterer */
      var markerCluster = new MarkerClusterer(map, markers); 


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

  }

</script>

【讨论】：