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

การแสดงภาพ: Geomap

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

ภาพรวม

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

ตัวอย่าง

เรามีตัวอย่างไว้ 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 รูปแบบ โดยแต่ละรูปแบบรองรับจํานวนคอลัมน์ที่แตกต่างกัน และประเภทข้อมูลที่แตกต่างกันสําหรับแต่ละคอลัมน์ ที่อยู่ทั้งหมดในตารางต้องใช้รหัสเดียวหรือทั้ง 2 ชื่อ คุณจึงผสมประเภทไม่ได้

รูปแบบ 1: ตําแหน่งละติจูด/ลองจิจูด รูปแบบนี้จะทํางานเมื่อตัวเลือก dataMode เป็น "เครื่องหมาย" เท่านั้น หากใช้รูปแบบนี้ คุณไม่จําเป็นต้องใส่ JavaScript ของ Google Maps ระบบจะป้อนสถานที่เป็น 2 คอลัมน์ และอีก 2 คอลัมน์ที่ไม่บังคับ ได้แก่
1. [หมายเลข จําเป็น] ละติจูด จํานวนบวกเป็นทิศเหนือ จํานวนที่ติดลบคือทิศใต้
2. [Number, ต้องระบุ] ลองจิจูด จํานวนบวกคือทิศตะวันออก จํานวนลบคือทิศตะวันตก
3. [ตัวเลข, ไม่บังคับ] ค่าที่เป็นตัวเลขที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้ คอลัมน์ที่ 4 จําเป็นต้องใช้
4. [สตริง ไม่บังคับ] ข้อความสตริงเพิ่มเติมที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้
รูปแบบ 2: ที่อยู่ ชื่อประเทศ ชื่อภูมิภาค หรือรหัสพื้นที่มหานครของสหรัฐฯ รูปแบบนี้ใช้งานได้กับตัวเลือก dataMode ที่ตั้งค่าเป็น "เครื่องหมาย" หรือ "ภูมิภาค" ระบบจะป้อนสถานที่ตั้งในคอลัมน์เดียวและคอลัมน์ที่ไม่บังคับ 2 คอลัมน์ ได้แก่
1. [สตริงที่จําเป็น] ตําแหน่งในแผนที่ ระบบยอมรับรูปแบบต่อไปนี้
  - ที่อยู่ที่เจาะจง (เช่น "1600 Pennsylvania Ave")
  - ชื่อประเทศเป็นสตริง (เช่น "อังกฤษ") หรือรหัส ISO-3166 ตัวพิมพ์ใหญ่ หรือตัวอักษรภาษาอังกฤษที่เทียบเท่า (เช่น "GB" หรือ "สหราชอาณาจักร")
  - ชื่อรหัสภูมิภาค ISO-3166-2 ตัวพิมพ์ใหญ่หรือคําภาษาอังกฤษที่เทียบเท่า (เช่น "US-NJ" หรือ "New Jerry") หมายเหตุ: ระบุภูมิภาคได้เมื่อตั้งค่าตัวเลือก dataMode เป็น "ภูมิภาค" เท่านั้น
  - รหัสพื้นที่มหานคร นี่คือรหัสธนาคารสามหลักที่ใช้ในการกําหนดภูมิภาคต่างๆ รองรับรหัสในสหรัฐอเมริกาเท่านั้น โปรดทราบว่ารหัสเหล่านี้ไม่เหมือนกับรหัสพื้นที่ของโทรศัพท์
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`	สตริง	"โลก"	พื้นที่ที่จะแสดงบนแผนที่ (ระบบจะแสดงพื้นที่โดยรอบด้วย) อาจเป็นรหัสประเทศ (ในรูปแบบ ISO-3166 ตัวพิมพ์ใหญ่) หรือสตริงใดสตริงหนึ่งต่อไปนี้ก็ได้ `world` - (ทั้งโลก) `us_metro` - (สหรัฐอเมริกา พื้นที่ในเมืองใหญ่) `005` - (อเมริกาใต้) `013` - (อเมริกากลาง) `021` - (อเมริกาเหนือ) `002` - (แอฟริกาทั้งหมด) `017` - (แอฟริกากลาง) `015` - (แอฟริกาเหนือ) `018` - (แอฟริกาใต้) `030` - (เอเชียตะวันออก) `034` - (เอเชียใต้) `035` - (ภูมิภาคเอเชีย/แปซิฟิก) `009` - (โอเชียเนีย) `145` - (ตะวันออกกลาง) `143` - (เอเชียกลาง) `151` - (เอเชียเหนือ) `154` - (ยุโรปเหนือ) `155` - (ยุโรปตะวันตก) `039` - (ยุโรปใต้) ตําแหน่งทางภูมิศาสตร์ไม่ได้เปิดใช้ลักษณะการทํางานของการเลื่อนหรือการลาก และพฤติกรรมการซูมแบบจํากัดเท่านั้น เปิดใช้การซูมออกขั้นพื้นฐานได้โดยการตั้งค่าพร็อพเพอร์ตี้ `showZoomOut`
`dataMode`	สตริง	"region"	วิธีแสดงค่าบนแผนที่ ระบบรองรับ 2 ค่าต่อไปนี้ `regions` - ใส่สีทั่วทั้งภูมิภาคด้วยสีที่เหมาะสม ตัวเลือกนี้ไม่สามารถใช้กับที่อยู่ละติจูด/ลองจิจูด ดูตัวอย่างภูมิภาค `markers` - แสดงจุดเหนือภูมิภาค พร้อมด้วยสีและขนาดที่แสดงถึงค่า ดูตัวอย่างเครื่องหมาย
`width`	สตริง	"556px"	ความกว้างของการแสดงภาพ หากไม่ได้กําหนดหน่วยไว้ หน่วยเริ่มต้นคือพิกเซล
`height`	สตริง	"347 พิกเซล"	ความสูงของภาพ หากไม่ได้กําหนดหน่วยไว้ หน่วยเริ่มต้นคือพิกเซล
`colors`	อาร์เรย์ของตัวเลข RGB ในรูปแบบ 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	การไล่สีเพื่อกําหนดให้กับค่าในการแสดงภาพ คุณต้องมีอย่างน้อย 2 ค่า การไล่ระดับสีจะรวมค่าทั้งหมดของคุณ รวมถึงค่ากลางที่คํานวณแล้วซึ่งมีสีอ่อนที่สุดเป็นค่าที่เล็กที่สุด และสีที่เข้มที่สุดเป็นค่าสูงสุด
`showLegend`	บูลีน	จริง	หากเป็น "จริง" ให้แสดงคําอธิบายแผนที่
`showZoomOut`	บูลีน	เท็จ	หาก "จริง" จะแสดงปุ่มที่มีป้ายกํากับที่พร็อพเพอร์ตี้ `zoomOutLabel` ระบุไว้ โปรดทราบว่าปุ่มนี้จะไม่มีผลใดๆ เมื่อคลิก ยกเว้นการเว้นกิจกรรม `zoomOut` หากต้องการจัดการเหตุการณ์นี้ ให้จับกิจกรรมนี้และเปลี่ยนตัวเลือก `region` คุณระบุ `showZoomOut` ได้เฉพาะในกรณีที่ตัวเลือก `region` เล็กกว่ามุมมองโลก วิธีหนึ่งในการเปิดใช้การซูมเข้าคือการติดตามเหตุการณ์ `regionClick` เปลี่ยนพร็อพเพอร์ตี้ `region` เป็นภูมิภาคที่ต้องการ และโหลดแผนที่ซ้ํา
`zoomOutLabel`	สตริง	"ซูมออก"	ป้ายกํากับสําหรับปุ่มซูม

เมธอด

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

เหตุการณ์

ชื่อ	คำอธิบาย	พร็อพเพอร์ตี้
`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) ซึ่งโดยปกติแล้วจะเป็นปัญหาการทดสอบเท่านั้น คุณแก้ไขปัญหานี้ได้ตามที่อธิบายไว้ในเว็บไซต์ มาโครmedia