หน้านี้ได้รับการแปลโดย Cloud Translation API

การแสดงข้อมูลผ่านภาพ: ภูมิศาสตร์แผนที่

ภาพรวม
ตัวอย่าง
กำลังโหลด
รูปแบบข้อมูล
ตัวเลือกการกำหนดค่า
เมธอด
เหตุการณ์
นโยบายข้อมูล
Notes

ภาพรวม

แผนที่ภูมิศาสตร์คือแผนที่ของประเทศ ทวีป หรือภูมิภาค โดยมีสีและค่าที่กำหนดไว้ให้กับภูมิภาคที่เฉพาะเจาะจง ค่าจะแสดงเป็นสเกลสี และคุณจะระบุโฮเวอร์เท็กซ์ที่ไม่บังคับสำหรับภูมิภาคได้ แผนที่จะแสดงผลในเบราว์เซอร์โดยใช้ Flash Player ที่ฝังอยู่ โปรดทราบว่าแผนที่ไม่สามารถเลื่อนหรือลากได้ แต่สามารถกำหนดค่าให้อนุญาตการซูมได้

ตัวอย่าง

เรามีตัวอย่าง 2 รายการ ตัวอย่างหนึ่งใช้รูปแบบการแสดงภูมิภาค และอีกตัวอย่างหนึ่งใช้รูปแบบการแสดงเครื่องหมาย

ตัวอย่างภูมิภาค

รูปแบบภูมิภาคจะใส่สีที่สอดคล้องกับค่าที่คุณกำหนดให้กับทั้งภูมิภาค (โดยทั่วไปจะเป็นประเทศ) ด้วย ระบุรูปแบบภูมิภาคโดยการกำหนด 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);

รูปแบบข้อมูล

ระบบรองรับที่อยู่ 2 รูปแบบ โดยแต่ละรูปแบบรองรับจำนวนคอลัมน์ที่แตกต่างกัน และประเภทข้อมูลต่างกันสำหรับแต่ละคอลัมน์ ที่อยู่ทั้งหมดในตารางต้องใช้อย่างใดอย่างหนึ่งเท่านั้น คุณจะใช้ประเภทผสมกันไม่ได้

รูปแบบ 1: ตำแหน่งละติจูด/ลองจิจูด รูปแบบนี้จะใช้ได้ก็ต่อเมื่อตัวเลือก dataMode คือ "markers" หากใช้รูปแบบนี้ คุณไม่จำเป็นต้องรวม JavaScript ของ Google Maps ไว้ด้วย ป้อนสถานที่ตั้งเป็น 2 คอลัมน์และ 2 คอลัมน์ที่ไม่บังคับ ได้แก่
1. [ตัวเลข ต้องระบุ] ละติจูด จำนวนบวกคือทิศเหนือ ส่วนค่าลบคือทิศใต้
2. [ตัวเลข ต้องระบุ] ลองจิจูด จำนวนบวกคือทิศตะวันออก ส่วนค่าลบคือทิศตะวันตก
3. [ตัวเลข, ไม่บังคับ] ค่าตัวเลขที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้ หากใช้คอลัมน์ 4 คุณต้องระบุคอลัมน์นี้
4. [สตริง, ไม่บังคับ] ข้อความสตริงเพิ่มเติมที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้
รูปแบบ 2: ที่อยู่ ชื่อประเทศ ตำแหน่งของชื่อภูมิภาค หรือรหัสพื้นที่ในเมืองใหญ่ของสหรัฐอเมริกา รูปแบบนี้ใช้ได้กับตัวเลือก dataMode ที่ตั้งค่าเป็น "เครื่องหมาย" หรือ "ภูมิภาค" ป้อนสถานที่ตั้งลงใน 1 คอลัมน์และ 2 คอลัมน์ที่ไม่บังคับ ได้แก่
1. [สตริง ต้องระบุ] ตำแหน่งแผนที่ ระบบยอมรับรูปแบบต่อไปนี้
  - ที่อยู่ที่เจาะจง (เช่น "1600 Pennsylvania Ave")
  - ชื่อประเทศเป็นสตริง (เช่น "อังกฤษ") หรือรหัส ISO-3166 ตัวพิมพ์ใหญ่ หรือข้อความภาษาอังกฤษที่เทียบเท่า (เช่น "GB" หรือ "UK")
  - ชื่อรหัสภูมิภาค ISO-3166-2 ตัวพิมพ์ใหญ่หรือข้อความภาษาอังกฤษ (เช่น "US-NJ" หรือ "นิวเจอร์ซีย์") หมายเหตุ: คุณจะระบุภูมิภาคได้ก็ต่อเมื่อตั้งค่าตัวเลือก dataMode เป็น "ภูมิภาค" เท่านั้น
  - รหัสพื้นที่ในเมืองใหญ่ รหัสเมืองใหญ่เหล่านี้คือรหัสเมืองใหญ่ 3 หลักที่ใช้กำหนดภูมิภาคต่างๆ ซึ่งรองรับเฉพาะรหัสของสหรัฐอเมริกาเท่านั้น โปรดทราบว่ารหัสเหล่านี้ไม่เหมือนกับรหัสพื้นที่ของโทรศัพท์
2. [ตัวเลข, ไม่บังคับ] ค่าตัวเลขที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้ หากใช้คอลัมน์ 3 คุณต้องระบุคอลัมน์นี้
3. [สตริง, ไม่บังคับ] ข้อความสตริงเพิ่มเติมที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้

หมายเหตุ: แผนที่สามารถแสดงรายการได้สูงสุด 400 รายการ หาก DataTable หรือ DataView มีแถวมากกว่า 400 แถว ระบบจะแสดงเฉพาะ 400 แถวแรก โหมดที่เร็วที่สุดคือ dataMode='regions' พร้อมตำแหน่งที่ระบุเป็นรหัส ISO และ 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`	string	"โลก"	พื้นที่ที่จะแสดงบนแผนที่ (พื้นที่ใกล้เคียงจะปรากฏขึ้นด้วย) อาจเป็นรหัสประเทศ (ในรูปแบบ ISO-3166 ตัวพิมพ์ใหญ่) หรือสตริงใดสตริงหนึ่งต่อไปนี้ `world` - (ทั่วโลก) `us_metro` - (สหรัฐอเมริกา พื้นที่เมืองใหญ่) `005` - (อเมริกาใต้) `013` - (อเมริกากลาง) `021` - (อเมริกาเหนือ) `002` - (ทั่วทั้งแอฟริกา) `017` - (แอฟริกากลาง) `015` - (แอฟริกาเหนือ) `018` - (แอฟริกาใต้) `030` - (เอเชียตะวันออก) `034` - (เอเชียใต้) `035` - (ภูมิภาคเอเชีย/แปซิฟิก) `009` - (โอเชียเนีย) `145` - (ตะวันออกกลาง) `143` - (เอเชียกลาง) `151` - (เอเชียเหนือ) `154` - (ยุโรปเหนือ) `155` - (ยุโรปตะวันตก) `039` - (ยุโรปใต้) แผนที่ภูมิศาสตร์ไม่อนุญาตให้เลื่อนหรือลาก และจำกัดลักษณะการย่อ/ขยายเท่านั้น คุณเปิดใช้การซูมเข้าออกได้ด้วยการตั้งค่าพร็อพเพอร์ตี้ `showZoomOut`
`dataMode`	string	"ภูมิภาค"	วิธีแสดงค่าบนแผนที่ ค่าที่รองรับมี 2 ค่า ได้แก่ `regions` - แต่งสีสำหรับทั้งภูมิภาคด้วยสีที่เหมาะสม ตัวเลือกนี้ใช้ไม่ได้กับที่อยู่ละติจูด/ลองจิจูด ดูตัวอย่างภูมิภาค `markers` - แสดงจุดเหนือภูมิภาค โดยสีและขนาดแสดงถึงค่า ดูตัวอย่างเครื่องหมาย
`width`	string	"556 พิกเซล"	ความกว้างของการแสดงภาพ หากไม่ได้ใส่หน่วยไว้ หน่วยเริ่มต้นจะเป็นพิกเซล
`height`	string	"347 พิกเซล"	ความสูงของการแสดงภาพ หากไม่ได้ใส่หน่วยไว้ หน่วยเริ่มต้นจะเป็นพิกเซล
`colors`	อาร์เรย์ของหมายเลข RGB ในรูปแบบ 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	การไล่ระดับสีเพื่อกำหนดค่าในการแสดงภาพ คุณต้องมีค่าอย่างน้อย 2 ค่า การไล่ระดับสีจะรวมค่าทั้งหมด บวกค่ากลางที่คำนวณแล้ว โดยสีอ่อนที่สุดเป็นค่าเล็กที่สุด และสีเข้มที่สุดเป็นค่าสูงสุด
`showLegend`	boolean	จริง	หากจริง ให้แสดงคำอธิบายสำหรับแผนที่
`showZoomOut`	boolean	false	หากเป็น "จริง" แสดงปุ่มที่มีป้ายกำกับที่พร็อพเพอร์ตี้ `zoomOutLabel` ระบุไว้ โปรดทราบว่าปุ่มนี้จะไม่ดำเนินการใดๆ เมื่อคลิก ยกเว้นเพื่อทำให้เกิดเหตุการณ์ `zoomOut` หากต้องการจัดการการซูม ให้จับเหตุการณ์นี้และเปลี่ยนตัวเลือก `region` คุณจะระบุ `showZoomOut` ได้เฉพาะในกรณีที่ตัวเลือก `region` มีขนาดเล็กกว่ามุมมองทั่วโลก วิธีหนึ่งในการเปิดใช้พฤติกรรมการซูมเข้าคือ การฟังเหตุการณ์ `regionClick` เปลี่ยนพร็อพเพอร์ตี้ `region` เป็นภูมิภาคที่เหมาะสม และโหลดแผนที่ซ้ำ
`zoomOutLabel`	string	"ซูมออก"	ป้ายกำกับสำหรับปุ่มซูม

วิธีการ

วิธีการ	ประเภทการแสดงผล	คำอธิบาย
`draw(data, options)`	ไม่มี	วาดแผนที่ สามารถส่งคืนได้ก่อนวาดเสร็จ (ดูกิจกรรม `drawingDone()`)
`getSelection()`	อาร์เรย์ขององค์ประกอบการเลือก	การใช้ `getSelection()` แบบมาตรฐาน องค์ประกอบที่เลือกคือแถว เมธอดนี้จะใช้งานได้เมื่อตัวเลือก `dataMode` เป็น "ภูมิภาค" เท่านั้น คุณเลือกได้เฉพาะภูมิภาคที่มีมูลค่าที่กำหนดไว้เท่านั้น
`setSelection(selection)`	ไม่มี	การใช้ `setSelection()` มาตรฐาน จะถือว่าการเลือก เป็นการเลือกแถวและรองรับการเลือกแถวหลายรายการ คุณจะเลือกได้เฉพาะภูมิภาคที่มีค่าที่กำหนดไว้เท่านั้น

กิจกรรม

ชื่อ	คำอธิบาย	พร็อพเพอร์ตี้
`error`	เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ	รหัส, ข้อความ
`select`	เริ่มทำงานเมื่อผู้ใช้คลิกภูมิภาคซึ่งมีค่าที่กำหนดไว้ หากต้องการดูสิ่งที่เลือก โปรดโทรหา `getSelection()` ใช้ได้เฉพาะเมื่อตั้งค่าตัวเลือก `dataMode` เป็น "ภูมิภาค" หมายเหตุ: เนื่องจากข้อจำกัดบางประการ ระบบจะไม่ส่งเหตุการณ์ `select` หากคุณเข้าถึงหน้าเว็บในรูปแบบไฟล์ในเบราว์เซอร์ (เช่น "file://") ไม่ใช่จากเซิร์ฟเวอร์ (เช่น "http://www").	ไม่มี
`regionClick`	มีการเรียกเมื่อคลิกภูมิภาค ใช้ได้กับทั้ง "ภูมิภาค" และ "เครื่องหมาย" `dataMode` แต่ในโหมดเครื่องหมาย ระบบจะไม่ใส่เครื่องหมายนี้สำหรับประเทศที่กำหนดไว้ในตัวเลือก "ภูมิภาค" (หากมีการระบุชื่อประเทศไว้) หมายเหตุ: เนื่องจากข้อจำกัดบางประการ ระบบจะไม่ส่งเหตุการณ์ `regionClick` หากคุณเข้าถึงหน้าเว็บในเบราว์เซอร์เป็นไฟล์ (เช่น "file://") ไม่ใช่จากเซิร์ฟเวอร์ (เช่น "http://www").	ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เดียว ซึ่งก็คือ `region` ซึ่งเป็นสตริงในรูปแบบ ISO-3166 ที่อธิบายภูมิภาคที่คลิก
`zoomOut`	เรียกใช้เมื่อคลิกปุ่มซูมออก หากต้องการจัดการการซูม ให้จับเหตุการณ์นี้และเปลี่ยนตัวเลือก `region` หมายเหตุ: เนื่องจากข้อจำกัดบางประการ ระบบจะไม่ส่งเหตุการณ์ `zoomOut` หากคุณเข้าถึงหน้าเว็บในรูปแบบไฟล์ในเบราว์เซอร์ (เช่น "file://") ไม่ใช่จากเซิร์ฟเวอร์ (เช่น "http://www").	ไม่มี
`drawingDone`	เรียกเมื่อวาดแผนที่ภูมิศาสตร์เสร็จแล้ว	ไม่มี

นโยบายข้อมูล

สถานที่ได้รับการระบุพิกัดทางภูมิศาสตร์โดย Google Maps ข้อมูลใดๆ ที่ไม่จำเป็นต้องระบุพิกัดทางภูมิศาสตร์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ โปรดดูข้อกำหนดในการให้บริการของ Google Maps สำหรับข้อมูลเพิ่มเติมเกี่ยวกับนโยบายข้อมูล

หมายเหตุ

เนื่องจากการตั้งค่าการรักษาความปลอดภัยของ Flash การแสดงข้อมูลดังกล่าว (และการแสดงภาพแบบ Flash ทั้งหมด) อาจทำงานไม่ถูกต้องเมื่อเข้าถึงจากตำแหน่งไฟล์ในเบราว์เซอร์ (เช่น file:///c:/webhost/myhost/myviz.html) ไม่ใช่จาก URL ของเว็บเซิร์ฟเวอร์ (เช่น http://www.myhost.com/myviz.html) ซึ่งโดยทั่วไปจะเป็นปัญหาการทดสอบเท่านั้น คุณแก้ไขปัญหานี้ได้ตามที่อธิบายไว้ในเว็บไซต์ Macromedia