개요
지역 지도는 특정 지역에 할당된 색상과 값을 가진 국가, 대륙 또는 지역의 지도입니다. 값은 색상 스케일로 표시되며 지역에 마우스 오버 텍스트를 선택적으로 지정할 수 있습니다. 지도는 삽입된 Flash 플레이어를 사용하여 브라우저에서 렌더링됩니다. 지도는 스크롤하거나 드래그할 수 없지만 확대/축소를 허용하도록 구성할 수 있습니다.
예
여기에는 두 가지 예가 있습니다. 하나는 지역 표시 스타일을 사용하고 다른 하나는 마커 디스플레이 스타일을 사용합니다.
지역 예
지역 스타일은 전체 지역 (일반적으로 국가)을 할당한 값에 해당하는 색상으로 채웁니다. 코드에서 options['dataMode']
= 'regions'
를 할당하여 지역 스타일을 지정합니다.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; </script> </head> <body> <div id="regions_div" style="width: 900px; height: 500px;"></div> </body> </html>
마커 예
'마커' 스타일은 지정된 지역 위에 크기가 지정된 색상과 원을 표시하여 값을 나타냅니다.
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load('current', {'packages': ['geomap']}); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Popularity'], ['New York', 200], ['Boston', 300], ['Miami', 400], ['Chicago', 500], ['Los Angeles', 600], ['Houston', 700] ]); var options = {}; options['region'] = 'US'; options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors options['dataMode'] = 'markers'; var container = document.getElementById('map_canvas'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; </script> </head> <body> <div id='map_canvas'></div> </body> </html>
로드 중
google.charts.load
패키지 이름은 "geomap"
입니다.
google.charts.load('current', {'packages': ['geomap']});
지역 지도 시각화 클래스 이름은 google.visualization.GeoMap
입니다.
var visualization = new google.visualization.GeoMap(container);
데이터 형식
두 가지 주소 형식이 지원됩니다. 각 형식에는 서로 다른 개수의 열과 각 열에 다른 데이터 유형이 지원됩니다. 테이블의 모든 주소는 둘 중 하나만 사용해야 합니다. 유형을 혼합할 수 없습니다.
- 형식 1: 위도/경도 위치 이 형식은
dataMode
옵션이 '마커'인 경우에만 작동합니다. 이 형식을 사용하는 경우 Google 지도 자바스크립트를 포함하지 않아도 됩니다. 위치는 두 개의 열과 선택적 열 두 개에 입력됩니다.- [숫자, 필수] 위도입니다. 양수는 북쪽, 음수는 남쪽입니다.
- [숫자, 필수] 경도입니다. 양수는 동쪽, 음수는 서쪽입니다.
- [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 열 4를 사용하는 경우 이 열은 필수입니다.
- [문자열, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 추가 문자열 텍스트입니다.
- 형식 2: 주소, 국가 이름, 지역 이름 위치 또는 미국 대도시 지역 번호 이 형식은 '마커' 또는 '지역'으로 설정된
dataMode
옵션과 함께 사용할 수 있습니다. 위치는 1개의 열과 2개의 선택적인 열에 입력됩니다.- [문자열, 필수] 지도 위치입니다. 다음과 같은 형식이
허용됩니다.
- 특정 주소 (예: '1600 Pennsylvania Ave')
- 문자열 (예: '영국') 또는 대문자 ISO-3166 코드나 영어 텍스트 (예: 'GB' 또는 '영국')로 표시된 국가 이름입니다.
- 대문자 ISO-3166-2 지역 코드명 또는 이에 상응하는 영문 텍스트 (예: 'US-NJ' 또는 '뉴저지') 참고: 리전은 dataMode 옵션이 '리전'으로 설정된 경우에만 지정할 수 있습니다.
- 권역 지역 번호. 여러 지역을 지정하는 데 사용되는 3자리 대도시 코드입니다. 미국 코드만 지원됩니다. 전화번호와 지역 코드는 동일하지 않습니다.
- [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 열 3을 사용하는 경우 이 열은 필수입니다.
- [문자열, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 추가 문자열 텍스트입니다.
- [문자열, 필수] 지도 위치입니다. 다음과 같은 형식이
허용됩니다.
참고: 지도에는 최대 400개의 항목을 표시할 수 있습니다. DataTable 또는 DataView에 행이 400개를 초과하면 처음 400개만 표시됩니다. 가장 빠른 모드는 위치가 ISO 코드로 지정된 dataMode='regions'
및 위도/경도 엔엔티가 있는 dataMode='markers'
입니다. 가장 느린 모드는 문자열 주소가 있는 dataMode='markers'
입니다.
중요: DataTable
는 사용할 열 앞에 있는 모든 선택 열을 반드시 포함해야 합니다. 예를 들어 경도/위도 테이블을 지정하려고 하며 열 1, 2, 4만 사용하려는 경우 DataTable
는 여전히 열 3을 정의해야 합니다 (값을 추가할 필요는 없음).
dataTable = new google.visualization.DataTable(); dataTable.addRows(1); dataTable.addColumn('number', 'LATITUDE', 'Latitude'); dataTable.addColumn('number', 'LONGITUDE', 'Longitude'); dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it. dataTable.addColumn('string', 'HOVER', 'HoverText'); dataTable.setValue(0,0,47.00); dataTable.setValue(0,1,-122.00); dataTable.setValue(0,3,"Hello World!");
구성 옵션
이름 | 유형 | 기본 | 설명 |
---|---|---|---|
region |
문자열 | '세계' | 지도에 표시할 영역입니다. (주변 지역도 표시됩니다.) 국가 코드 (대문자 ISO-3166 형식) 또는 다음 문자열 중 하나일 수 있습니다.
Geomap은 스크롤 또는 드래그 동작을 지원하지 않으며 확대/축소 동작만 제한합니다. 기본 축소 기능은 |
dataMode |
문자열 | '지역' | 값을 지도에 표시하는 방법 두 가지 값이 지원됩니다. |
width |
문자열 | '556px' | 시각화의 너비입니다. 단위가 지정되지 않은 경우 기본 단위는 픽셀입니다. |
height |
문자열 | '347px' | 시각화의 높이입니다. 단위가 지정되지 않은 경우 기본 단위는 픽셀입니다. |
colors |
0xRRGGBB 형식의 RGB 숫자 배열 | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | 시각화의 값에 할당할 색상 그라디언트입니다. 값이 2개 이상 있어야 합니다. 경사에는 모든 값과 계산된 중간 값이 포함되며, 가장 밝은 색은 가장 작은 값으로, 가장 밝은 색은 가장 높은 값으로 포함됩니다. |
showLegend |
boolean | true | true인 경우 지도의 범례를 표시합니다. |
showZoomOut |
boolean | false | true인 경우 zoomOutLabel 속성에서 지정한 라벨이 있는 버튼을 표시합니다. 이 버튼은 클릭했을 때 아무 작업도 하지 않습니다. 단, zoomOut 이벤트가 발생합니다.
확대/축소를 처리하려면 이 이벤트를 포착하고 region 옵션을 변경합니다.
region 옵션이 세계 뷰보다 작은 경우에만 showZoomOut 을 지정할 수 있습니다. 확대 동작을 사용 설정하는 한 가지 방법은 regionClick 이벤트를 수신 대기하고 region 속성을 적절한 지역으로 변경한 다음 지도를 새로고침하는 것입니다. |
zoomOutLabel |
문자열 | '축소' | 확대/축소 버튼의 라벨입니다. |
방법
메서드 | 반환 유형 | 설명 |
---|---|---|
draw(data, options) |
없음 | 지도를 그립니다. 그리기가 완료되기 전에 반환될 수 있습니다 (drawingDone() 이벤트 참고). |
getSelection() |
선택 요소 배열 | 표준 getSelection() 구현 선택한 요소는 행입니다. 이 메서드는 dataMode 옵션이 '리전'인 경우에만 작동합니다. 값이 할당된 리전만 선택할 수 있습니다. |
setSelection(selection) |
없음 | 표준 setSelection() 구현입니다. 선택 항목을 행 선택으로 취급하고 여러 행 선택을 지원합니다. 할당된 값이 있는 리전만 선택할 수 있습니다. |
이벤트
이름 | 설명 | 속성 |
---|---|---|
error |
차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. | ID, 메시지 |
select |
사용자가 값이 할당된 지역을 클릭하면 발생됩니다. 어떤 항목이 선택되었는지 알아보려면 참고: 일부 제한사항으로 인해 |
없음 |
regionClick |
리전을 클릭하면 호출됩니다. '지역' 및 '마커' 참고: 일부 제한사항으로 인해 브라우저에서 |
클릭된 지역을 설명하는 ISO-3166 형식의 문자열인 단일 속성 region 를 포함하는 객체. |
zoomOut |
축소 버튼을 클릭하면 호출됩니다. 확대/축소를 처리하려면 이 이벤트를 포착하고 참고: 일부 제한사항으로 인해 |
없음 |
drawingDone |
Geomap이 그리기를 완료하면 호출됩니다. | 없음 |
데이터 정책
위치는 Google 지도에서 지오코딩됩니다. 지오코딩이 필요하지 않은 데이터는 어떠한 서버로도 전송되지 않습니다. 데이터 정책에 관한 자세한 내용은 Google 지도 서비스 약관을 참고하세요.
참고사항
플래시 보안 설정 때문에 이 서버 설정과 모든 플래시 기반 시각화가 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아니라 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 올바르게 작동하지 않을 수 있습니다. 이는 일반적으로 테스트 문제일 뿐입니다. Macromedia 웹사이트에 설명된 대로 이 문제를 해결할 수 있습니다.