Question

我已经坚持了很久。我创建了一个使用php从mysql数据库中提取数据的地图。一切都很好，我得到每个标记的信息窗口。我添加了聚类代码，工作正常。现在它只在点击标记时显示相同的信息框。我试过在这个网站上发布与我的问题相关的解决方案，但似乎无法找到解决方案。任何帮助将不胜感激

var customIcons = {
  BB: {
    icon: '/assets/img/bb-icon.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  SC: {
    icon: '/assets/img/sc-icon.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  BOTH: {
    icon: '/assets/img/both-icon.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};

function load() {
    var cluster = [];
  var map = new google.maps.Map(document.getElementById("maplocation"), {
    center: new google.maps.LatLng(<?php echo $coord; ?>),
    zoom: 9,
    mapTypeId: 'roadmap'
  });
  var infowindow = new google.maps.InfoWindow();

  // Change this depending on the name of your PHP file
  downloadUrl("/generate-coords.php?map=<?php echo $_GET['area']; ?>", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
 for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var thetitle = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var farmno = markers[i].getAttribute("farmno");
        var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
        var html = '<b>' + name + '</b> <br />' + address+ '<br /><a href="/fulldetails.php?farmno=' + farmno + '">More Details</a>';
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
           map: map,
           position: point,
           icon: icon.icon,
           shadow: icon.shadow,
           title:thetitle,
           content:html
          });
       google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent('<div style=height:80px;overflow:none>'+html+'</div>');
                        infowindow.open(map, this);
                    }
                })(marker, i));
             cluster.push(marker);
         }

        var markerClustererOptions = {   
           maxZoom: null,
           gridSize: 15 ,   
          title: 'Click to zoom in and see farms.'
         };  
    var mc = new MarkerClusterer(map,cluster,markerClustererOptions);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}`

Answer 1

试试这个

google.maps.event.addListener(marker, 'click', (function(marker, i, html) {
    return function() {
        infowindow.setContent('<div style=height:80px;overflow:none>'+html+'</div>');
        infowindow.open(map, marker);
})(marker, i, html));

Google地图标记群集显示相同的信息窗口

1 个答案: