Question

我用户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>

任何帮助都会受到赞赏。感谢您的所有帮助。

Answer 1

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

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”属性，这是有记录的，并且有利于在鼠标悬停时出现在Marker上作为工具提示。

working example

我在标记属性中未定义

1 个答案: