2013-04-08 50 views
0

我用戶markerclustererplus,我想在集羣點擊中顯示信息窗口。但是我對集羣中的所有標記都未定義。我無法弄清楚爲什麼會發生什麼。這裏是我的代碼我在標記屬性處得到undefined

<!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> 

任何幫助whoul被讚賞。感謝您的所有幫助。

回答

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,它不記錄的行爲,您可能需要使用「標題」屬性相反,這是記錄和有利於出現在標記作爲鼠標懸停的工具提示。

working example