FusionTablesLayerOptions 변경 스타일 옵션

Question

FusionLayer 객체의 스타일을 변경하는 방법은 무엇입니까?

클릭 한 상태를 강조 표시하는 onClick 이벤트를 만들려고합니다. 이렇게하려면 객체의 strokeOpacity를 증가시키고 strokeColor를 red로 변경 시키길 원합니다. 객체가 다각형 인 경우

, 나는이 작업을 수행 할 수 있습니다 : 객체가 다각형이

var red = "#FF0000"; //red 
function LoadStates() { 
    var points = [ 
    new google.maps.LatLng(34.984, -85.605), 
    new google.maps.LatLng(32.864, -85.184) 

    //...etc 
    ]; 


    var alabama = new google.maps.Polygon({ 
     paths: points, 
     strokeColor: outlineColor, 
     strokeOpacity: 0, 
     strokeWeight: 2, 
     fillColor: invisColor, 
     fillOpacity: 0 
    }); 

    //add event listeners to polygon, then add polygon to map 
    google.maps.event.addListener(alabama, 'mouseover', function() { 
     alabama.setOptions({ strokeColor: red }); 
     alabama.setOptions({ strokeOpacity: 1 }); 
    }); 

    google.maps.event.addListener(alabama, 'mouseout', function() { 
     alabama.setOptions({ strokeOpacity: 0 }); 
    }); 

    google.maps.event.addListener(alabama, 'click', function() { 
     document.getElementById("StateName").innerHTML = "Alabama"; extend(); 
    }); 
    alabama.setMap(map); 

} 

때문에, 나는 단순히은, strokeColor 및 불투명도를 변경하는 .setOptions를 사용할 수 있습니다.

kml 파일에서 생성 된 FusionLayers 객체의 폴리곤 옵션을 변경하려면 어떻게해야합니까?

"arizona"경계 파일.

function LoadAZ() { 
    arizona = new google.maps.FusionTablesLayer({ 
     suppressInfoWindows: false, 

     query: { 
      select: 'col4', 
      from: '210217', 
      where: "col3 <= 'B' " 
     }, 

     styles: [{ 
      polygonOptions: { 
       strokeColor: outlineColor, 
       strokeOpacity: 0.01, 
       strokeWeight: 2, 
       fillColor: invisColor, 
       fillOpacity: .01 
      } 

여기의 스타일 옵션이 변경됩니다. 이벤트의 옵션을 변경하려면 어떻게해야합니까? 나는 이런 식으로 뭔가를 할 : 순간

google.maps.event.addListener(arizona, 'mouseover', function() { 
     arizona.setOptions({ strokeOpacity: 1 }); 
    }); 

Answer 1

당신이 FusionTablesLayer의의 mouseover을 처리 할 수없는, 유일하게 지원되는 이벤트는 click (내가 틀렸다면 정정 해줘)입니다.

그러나 이라는 라이브러리가있어 FusionTablesLayer에 mouseover 및 mouseout 이벤트를 사용할 수 있습니다. 라이브러리 사용 방법은 this good blog post을 확인하십시오.

Answer 2

setOptions 메서드를 사용하여 직접 변경할 수 있습니다.

var selectedOptions = { 
     styles: [{ 
      polygonOptions: { 
       strokeColor: red, 
       strokeOpacity: 1, 
       strokeWeight: 2, 
       fillColor: invisColor, 
       fillOpacity: .01 
      } 

     }] 
    } 

google.maps.event.addListener(arizona, 'click', function (clickEvent) { 
     document.getElementById("StateName").innerHTML = "Arizona"; extend(); 
     arizona.setOptions(selectedOptions); 
    }); 

이렇게하면 kml 파일의 polygonOptions이 직접 변경됩니다.

Answer 3

Google 시각화 API를 사용하여 FusionTable의 다각형 스타일을 변경하여 테이블에 저장된 데이터에서 기본 v3 다각형을 만들고 mouseover/out 이벤트를 추가합니다.