ภาพรวม
แผนที่ภูมิศาสตร์คือแผนที่ของประเทศ ทวีป หรือภูมิภาคต่างๆ ที่มีสีและค่าที่กําหนดให้กับภูมิภาคหนึ่งๆ ค่าจะแสดงเป็นสเกลสี โดยคุณจะระบุข้อความที่แสดงเมื่อเลื่อนเมาส์ผ่านก็ได้สําหรับภูมิภาคต่างๆ แผนที่แสดงผลในเบราว์เซอร์โดยใช้โปรแกรมเล่น 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 คอลัมน์ที่ไม่บังคับ ได้แก่- [หมายเลข จําเป็น] ละติจูด จํานวนบวกเป็นทิศเหนือ จํานวนที่ติดลบคือทิศใต้
- [Number, ต้องระบุ] ลองจิจูด จํานวนบวกคือทิศตะวันออก จํานวนลบคือทิศตะวันตก
- [ตัวเลข, ไม่บังคับ] ค่าที่เป็นตัวเลขที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้ คอลัมน์ที่ 4 จําเป็นต้องใช้
- [สตริง ไม่บังคับ] ข้อความสตริงเพิ่มเติมที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้
- รูปแบบ 2: ที่อยู่ ชื่อประเทศ ชื่อภูมิภาค หรือรหัสพื้นที่มหานครของสหรัฐฯ รูปแบบนี้ใช้งานได้กับตัวเลือก
dataMode
ที่ตั้งค่าเป็น "เครื่องหมาย" หรือ "ภูมิภาค" ระบบจะป้อนสถานที่ตั้งในคอลัมน์เดียวและคอลัมน์ที่ไม่บังคับ 2 คอลัมน์ ได้แก่- [สตริงที่จําเป็น] ตําแหน่งในแผนที่ ระบบยอมรับรูปแบบต่อไปนี้
- ที่อยู่ที่เจาะจง (เช่น "1600 Pennsylvania Ave")
- ชื่อประเทศเป็นสตริง (เช่น "อังกฤษ") หรือรหัส ISO-3166 ตัวพิมพ์ใหญ่ หรือตัวอักษรภาษาอังกฤษที่เทียบเท่า (เช่น "GB" หรือ "สหราชอาณาจักร")
- ชื่อรหัสภูมิภาค ISO-3166-2 ตัวพิมพ์ใหญ่หรือคําภาษาอังกฤษที่เทียบเท่า (เช่น "US-NJ" หรือ "New Jerry") หมายเหตุ: ระบุภูมิภาคได้เมื่อตั้งค่าตัวเลือก dataMode เป็น "ภูมิภาค" เท่านั้น
- รหัสพื้นที่มหานคร นี่คือรหัสธนาคารสามหลักที่ใช้ในการกําหนดภูมิภาคต่างๆ รองรับรหัสในสหรัฐอเมริกาเท่านั้น โปรดทราบว่ารหัสเหล่านี้ไม่เหมือนกับรหัสพื้นที่ของโทรศัพท์
- [ตัวเลข, ไม่บังคับ] ค่าที่เป็นตัวเลขที่แสดงเมื่อผู้ใช้วางเมาส์เหนือภูมิภาคนี้ คอลัมน์ที่ 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 ตัวพิมพ์ใหญ่) หรือสตริงใดสตริงหนึ่งต่อไปนี้ก็ได้
ตําแหน่งทางภูมิศาสตร์ไม่ได้เปิดใช้ลักษณะการทํางานของการเลื่อนหรือการลาก และพฤติกรรมการซูมแบบจํากัดเท่านั้น เปิดใช้การซูมออกขั้นพื้นฐานได้โดยการตั้งค่าพร็อพเพอร์ตี้ |
dataMode |
สตริง | "region" | วิธีแสดงค่าบนแผนที่ ระบบรองรับ 2 ค่าต่อไปนี้
|
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 |
เริ่มทํางานเมื่อผู้ใช้คลิกภูมิภาคที่มีค่าที่กําหนด หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา หมายเหตุ: เนื่องจากข้อจํากัดบางอย่าง ระบบไม่ได้ส่งเหตุการณ์ |
ไม่มี |
regionClick |
เรียกเมื่อมีการคลิกภูมิภาค ใช้ได้กับทั้ง "ภูมิภาค" และ "เครื่องหมาย" หมายเหตุ: เนื่องจากข้อจํากัดบางอย่าง เหตุการณ์ |
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ region รายการเดียว ซึ่งเป็นสตริงในรูปแบบ ISO-3166 ที่อธิบายภูมิภาคที่มีการคลิก |
zoomOut |
โทรเมื่อคลิกปุ่มซูมออก หากต้องการจัดการเหตุการณ์นี้ ให้บันทึกเหตุการณ์นี้และเปลี่ยนตัวเลือก หมายเหตุ: เนื่องจากข้อจํากัดบางอย่าง ระบบไม่ได้ส่งเหตุการณ์ |
ไม่มี |
drawingDone |
โทรเมื่อแผนที่ภูมิศาสตร์วาดเสร็จแล้ว | ไม่มี |
นโยบายข้อมูล
Google Maps ใช้ตําแหน่งทางภูมิศาสตร์ไปยังสถานที่ต่างๆ ข้อมูลใดๆ ที่ไม่ต้องใช้การเข้ารหัสทางภูมิศาสตร์จะไม่ส่งไปยังเซิร์ฟเวอร์ใดๆ ดูข้อมูลเพิ่มเติมเกี่ยวกับนโยบายข้อมูลได้ที่ข้อกําหนดในการให้บริการของ Google Maps
หมายเหตุ
เนื่องจากการตั้งค่าความปลอดภัยของ Flash กรณีนี้ (และการแสดงภาพแบบ Flash ทั้งหมด) อาจทํางานไม่ถูกต้องเมื่อเข้าถึงจากตําแหน่งไฟล์ในเบราว์เซอร์ (เช่น file:///c:/webhost/myhost/myviz.html) แทนที่จะเป็น URL ของเว็บเซิร์ฟเวอร์ (เช่น http://www.myhost.com/myviz.html) ซึ่งโดยปกติแล้วจะเป็นปัญหาการทดสอบเท่านั้น คุณแก้ไขปัญหานี้ได้ตามที่อธิบายไว้ในเว็บไซต์ มาโครmedia