융합 표지도에 대한 동적 범례

융합 표지도의 수정 된 표본과 그 코드가 아래에 나와 있습니다. 파란색 마커를 선택할 때, 전설 그 이름 만 파란색 마커를 표시해야합니다 빨간색 마커를 선택할 때 전설의 빨간색 마커 아이콘을 표시 할 수 있도록융합 표지도에 대한 동적 범례

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <title>Fusion Tables Layer Example: Dynamic styles and templates</title> 
    <style> 
    body { font-family: Arial, sans-serif; font-size: 12px; } 
    #map-canvas { height: 660px; width: 100%; } 
    #map-canvas img { max-width: none; } 
    #visualization { height: 100%; width: 100%; } 
    #legend1 { width: 200px; background: #FFF;padding: 10px; margin: 5px;font-size: 12px;font-family: Arial, sans-serif;border: 1px solid black;} 
    .color {border: 1px solid;height: 12px;width: 15px; margin-right: 3px;float: left;} 
    .red {background: #C00;} 
    .blue {background: #06C;} 
</style> 
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function initialize() { 
     var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      center: new google.maps.LatLng(37.4, -122.1), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var layer = new google.maps.FusionTablesLayer({ 
      query: { 
      select: 'Address', 
      from: '15UY2pgiz8sRkq37p2TaJd64U7M_2HDVqHT3Quw' 
      }, 
      map: map, 
      styleId: 1, 
      templateId: 1 
     }); 
     var legend1 = document.createElement('div'); 
     legend1.id = 'legend1'; 
     var content1 = []; 
     content1.push('<p><div class="color red"></div>Red markers</p>'); 
     legend1.innerHTML = content1.join(''); 
     legend1.index = 1; 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend1); 
     var legend2 = document.createElement('div'); 
     legend2.id = 'legend1'; 
     var content2 = []; 
     content2.push('<p><div class="color blue"></div>Blue markers</p>'); 
     legend2.innerHTML = content2.join(''); 
     legend2.index = 1; 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend2); 
      google.maps.event.addDomListener(document.getElementById('style'), 
      'change', function() { 
       var selectedStyle = this.value; 
       layer.set('styleId', selectedStyle); 
       var selectedTemplate = this.value; 
       layer.set('templateId', selectedTemplate); 
     }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    <div> 
     <label>Select style:</label> 
     <select id="style"> 
     <option value="1">Red</option> 
     <option value="2">Blue</option> 
     </select> 
    </div> 
    </body> 
</html>

어떻게이지도에 동적 범례를 추가 할 수 있습니다.

출처

2013-10-09 mpsbhat

마커의 색상은 충분한 정보가 아니다. 귀하의 예제는 각 마커의 색상 만 변경합니다. 칼럼의 값에 따라 마커 색상을 사용하고 싶다고 가정하고 (사용 된 테이블에 대해서는'delivery' 열에서 추측 할 것입니다) 필터를 적용하려고합니다. 이 열을 기반으로 한 마커? –

지도의 오른쪽 하단 모서리에 선택한 스타일 유형을 나타내는 범례가 필요합니다. 즉, 파란색 마커를 선택하면 파란색 마커 아이콘이 표시되어야합니다. – mpsbhat

드롭 다운에서 파란색 마커를 선택하면 파란색 마커 만 나타나고 특정 마커 (조건절을 지정하지 않은 조건)가 없으므로 동적 범례를 적용 할 동적 조건이 없습니다. –

컨트롤을 지우고 모든 범례를 제거한 다음 원하는 범례를 다시 추가해야합니다.

바로

google.maps.event.addDomListener(document.getElementById('style')[...]

전에이 코드를 추가

//we need a copy of all legends(nodes), 
//otherwise they wouldn't be accessible when they have been removed 
var clonedArray = map.controls[google.maps.ControlPosition.RIGHT_BOTTOM] 
         .getArray().slice(); 

//observe changes of the styleId 
google.maps.event.addListener(layer,'styleid_changed',function(){ 
    //clear the controls 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].clear(); 
    //add the desired control 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM] 
      .push(clonedArray[this.get('styleId')-1]) 
}); 

//trigger the event to initially have only the legend 
//based on the selected style 
google.maps.event.trigger(layer,'styleid_changed');

데모 : http://jsfiddle.net/doktormolle/t3nY6/

출처

2013-10-11 07:53:14

융합 표지도에 대한 동적 범례

답변

관련 문제