XML/SQL 마커를 사용하여 Google지도에 클러스터 추가

Question

현재 위치 목록이있는 SQL 테이블이 있으며 Google지도에 채워집니다.

ID : http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/examples/advanced_example.html?이 데모에서와 같이 마커를 클러스터하고 싶습니까?

<script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

    var customIcons = { 
     restaurant: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     bar: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     } 
    }; 

    function load() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(51.854018, 0.974768), 
     zoom: 11, 
     mapTypeId: 'hybrid' 
     });  

     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP file 
     downloadUrl("phpsqlajax_genxml3.php", 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 dayticket = markers[i].getAttribute("dayticket"); 
      var clubmembership = markers[i].getAttribute("clubmembership"); 
      var address = markers[i].getAttribute("address"); 
      var contactdetails = markers[i].getAttribute("contactdetails"); 
      var watertype = markers[i].getAttribute("watertype"); 
      var disabledaccess = markers[i].getAttribute("disabledaccess"); 
      var lastupdated = markers[i].getAttribute("lastupdated"); 
      var type = markers[i].getAttribute("type"); 
      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 
      var html = "<h3><center>" + name + "</center></h3>" + "<b>Day Ticket: </b>" + dayticket + "</br>" + "<b>Club Membership: </b>" + clubmembership + "</br></br>" + "<b>Water Type: </b>" + watertype + "</br>" + "<b>Disabled Access: </b>" + disabledaccess + "</br>" + "<b>Contact Details: </b>" + contactdetails + "</br>" + "<b>Address: </b>" + address + "</br>" + "<b>Last Updated: </b>" + lastupdated; 
      var icon = customIcons[type] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
     } 
     }); 
    } 

    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, 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() {} 

    //]]> 
    </script> 

Answer 1

몇 가지를주의하는 것이 :

내지도 스크립트는 다음과 같다

현재 스크립트의 클러스터 러 유틸리티 라이브러리를 포함 할 것 : 여기 http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js

워드 프로세서를 (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html)에는 클러스터러를 구현하는 좋은 예가 있습니다. 마커 데이터가 SQL, XML 또는 그 밖의 다른 곳에서 가져온 것인지 여부는 중요하지 않습니다. 새 마커 객체를 만들 때 마커 객체를 MarkerClusterer 객체에 전달할 수 있어야합니다.