0

我使用markerclustererplus，我想在集群点击时显示信息窗口。但我对集群中的所有标记都没有定义。我只是无法弄清楚为什么以及会发生什么。这是我的代码 

<!DOCTYPE html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <style type="text/css">
      html, body, #map { margin: 0; padding: 0; height: 95% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var oncekimarker=null;
    var customIcons = {
      satilik: {
        icon: 'images/pins/yellow.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      kiralik: {
        icon: 'images/pins/blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function initialize() {
        var markers = null;
        var mcmarkers = [];
        var globalMarker = [];

      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39, 35),
        zoom: 6,
        mapTypeId: 'roadmap'
      });

      var infoWindow = new google.maps.InfoWindow;
      var infowindow = new google.maps.InfoWindow();

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"))
          var point = new google.maps.LatLng(lat, lng);
          var html = "something";
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          mcmarkers.push(marker);

          bindInfoWindow(marker, map, infoWindow, html);
        }

        var mcOptions = {
            gridSize: 30, 
            maxZoom: 13,
            zoomOnClick: false, 
            averageCenter: true
        };

          var mc = new MarkerClusterer(map, mcmarkers, mcOptions);
          google.maps.event.addListener(mc, 'clusterclick', function(cluster) {
            var content = '';

            // Convert lat/long from cluster object to a usable MVCObject
            var info = new google.maps.MVCObject;
            info.set('position', cluster.center_);

            //Get markers
            var yazmarkers = cluster.getMarkers();

            var titles = "";
            //Get all the titles
            for(var i = 0; i < yazmarkers.length; i++) {
                titles += yazmarkers[i].name + "\n";
            }
            infowindow.close();
            infowindow.setContent(titles); //set infowindow content to titles
            infowindow.open(map, info);

            google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() });

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

        if (oncekimarker) oncekimarker.setAnimation(null);
        marker.setAnimation(google.maps.Animation.BOUNCE);
        oncekimarker = marker;
      });
    }

    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() {}

    //]]>
    google.maps.event.addDomListener(window, 'load', initialize);

  </script>

  </head>

  <body>
    </div>
    <div id="map" style="width: 80%"></div>
  </body>

</html>

任何帮助都将不胜感激。感谢您的所有帮助。

4

1 回答 1

0

您的标记没有“名称”属性。

titles += yazmarkers[i].name + "\n";

您可以通过像这样创建它们来添加一个

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

警告：虽然目前这适用于 API，但它没有记录在案的行为，您可能希望改用“title”属性，该属性已记录在案并具有在鼠标悬停时作为工具提示出现在标记上的好处。

工作示例

于 2013-04-08T15:55:58.097 回答