1

마커 클러스터링을 설정해야하는 Google지도 (API V3 사용)가 있습니다. 기본적으로 마커 위치는 JSON을 통해로드되며 문제 (위 또는 아래), 위도 및 경도를 반환합니다.Google지도 - 클러스터링 마커

클러스터링을 설정하려고 시도했지만 JSON 호출이 실제로 점을 반환하지만지도에 아무 것도 표시되지 않습니다.

var map; 

function myMap(){ 
    var latlng = new google.maps.LatLng(35.94, 14.37); 

var mapOptions = { 
zoom: 10, 
center: latlng, 
panControl: false, 
mapTypeControl: false, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
scaleControl: false, 
streetViewControl: false, 
overviewMapControl: false, 
zoomControl: true}; 

map = new google.maps.Map(document.getElementById("map"), mapOptions); 
loadMarkers(); 
} 

function loadMarkers() {  

var mcOptions = {gridSize: 50, maxZoom: 15}; 
var issueSevereMarkers = []; 
var issueSlightMarkers = []; 

markerIssueHigh = new google.maps.MarkerImage("img/icn_issue_high.png", 
new google.maps.Size(10.0, 10.0), 
new google.maps.Point(0, 0), 
new google.maps.Point(5.0, 5.0) 
); 

markerIssueMedium = new google.maps.MarkerImage("img/icn_issue_medium.png", 
new google.maps.Size(10.0, 10.0), 
new google.maps.Point(0, 0), 
new google.maps.Point(5.0, 5.0) 
); 

var issuePoints = $.ajax({ 
    type: 'GET', 
    url: 'http://www.mydomain.com/php/markers.php?&jsoncallback=?', 
    dataType: 'JSONp', 
    timeout: 5000, 
    success: function(data) {   
     $.each(data, function(i,item){ 

     if (item.Issue == 1) { 
      // If severely congested     
       var latLng = new google.maps.LatLng(item.Latitude, item.Longitude); 
       var issueSevereMarker = new google.maps.Marker({'position': latLng}); 
       issueSevereMarkers.push(issueSevereMarker); 

     } else if (item.Issue == 2) { 
      // If slightly congested 
       var latLng = new google.maps.LatLng(item.Latitude, item.Longitude); 
       var issueSlightMarker = new google.maps.Marker({'position': latLng}); 
       issueSlightMarkers.push(issueSlightMarker); 
     } 

    }); 

    var markerClusterSevere = new MarkerClusterer(map, issueSevereMarkers); 
    var issueSlightMarkerCluster = new MarkerClusterer(map, issueSlightMarkers); 
    }, 
    error: function(data) { 

    } 
});  
} 

가 기본적으로 내가 무엇을하고 있는가하는 JSON에서 결과를 얻을 수 있으며, 문제가 제 1 형의 경우, 나는 issueSevereMarkers 배열에 핀을 추가, 그렇지 않으면 내가에 추가 : 여기에 내가 해낸 일이다 issueSlightMarkers 배열입니다. 마커의 점으로 배열을로드해야합니다. 내가 거기에 무엇인가 잘못하고 있는지 확실하지 않습니다.

또 다른 문제는 클러스터러가 기본적으로 마커가 그룹화되어 있다고 가정하는 사용자 지정 아이콘을 반환한다는 것입니다. 개별 마커를 확대하여 볼 때 markerIssueHigh 및 markerIssueMedium 이미지를 사용하도록 마커를 설정하려면 어떻게해야합니까?

나는 V3 (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html)

답변

0

실제로 사용하기위한 Clustere을 사용하고 있습니다 사용자 정의 아이콘 당신이 아무것도 표시하지 않을 것이다 이유에 명백한 아무것도 표시되지 않습니다

if (item.Issue == 1) { 
     // If severely congested     
      var latLng = new google.maps.LatLng(item.Latitude, item.Longitude); 
      var issueSevereMarker = new google.maps.Marker({position: latLng, 
                  icon:markerIssueHigh}); 
      issueSevereMarkers.push(issueSevereMarker); 

    } else if (item.Issue == 2) { 
     // If slightly congested 
      var latLng = new google.maps.LatLng(item.Latitude, item.Longitude); 
      var issueSlightMarker = new google.maps.Marker({position: latLng, 
                  icon:markerIssueMedium}); 

      issueSlightMarkers.push(issueSlightMarker); 
    } 

google.maps.Marker 생성자를 참조 할 필요가, 여기에 클러스터 러 (오히려 XML에서 데이터를 얻을 수있는 작업지도에 link입니다 JSON보다).

similar question은 클러스터에 사용자 지정 마커를 추가합니다.