ในเอกสารฉบับนี้ คุณจะได้ศึกษาวิธีใช้ Air Quality API เพื่อสร้างประสบการณ์การค้นหาสถานที่ที่สมบูรณ์ เราจะแสดงวิธีที่คุณภาพอากาศเป็นสัญญาณบอกคุณค่าสำหรับผู้ใช้ตั้งแต่เริ่มต้นจนจบ Funnel และวิธีฝังข้อมูล Air Quality API ไว้ในประสบการณ์การใช้งานที่มีอยู่
กรณีการใช้งานและคุณค่าที่เพิ่มขึ้น
สัญญาณ API คุณภาพอากาศอาจเหมาะสมกับประสบการณ์การค้นหาที่หลากหลาย เช่น เมื่อผู้ใช้กำลังมองหาสถานที่ที่จะเข้าชม Air Quality API มีฟีเจอร์ต่อไปนี้
- เรียลไทม์ * และข้อมูลประวัติ - ข้อมูลใหม่และถูกต้องซึ่งแสดงสถานะปัจจุบันและข้อมูลย้อนกลับภายในกรอบเวลา 30 วันที่มีความละเอียดรายชั่วโมง (* ภาพรวมรายชั่วโมงของคุณภาพอากาศนอกอาคาร)
- ข้อมูลทั่วโลกและในพื้นที่ - ครอบคลุมพื้นที่ทั้งหมดในกว่า 100 ประเทศ แต่ข้อมูล API คุณภาพอากาศ (สูงสุด 500 ล้านครั้ง) ที่ได้รับการแปลเป็นภาษาท้องถิ่นสูงคือสัญญาณสำคัญสำหรับให้ผู้ใช้เปรียบเทียบและตัดสินใจในที่ที่เหมาะสมที่สุด
คุณภาพอากาศอาจแตกต่างกันอย่างมากแม้แต่ในพื้นที่ใกล้เคียง
คำแนะนำแบบทีละขั้นตัวอย่าง
แสดงข้อมูลคุณภาพอากาศในช่วงต้นของประสบการณ์
การแสดงข้อมูล API คุณภาพอากาศมี 2 วิธีหลักๆ ดังนี้
เงื่อนไขปัจจุบัน / รายชั่วโมง: ให้แต่ละค่าแสดงในสถานที่แต่ละแห่ง
(ไปที่ส่วน: แสดงข้อมูล API คุณภาพอากาศบนหมุดตำแหน่ง)ชิ้นส่วนแผนที่ความหนาแน่น: วางซ้อนเลเยอร์สีที่แสดงถึงคุณภาพอากาศนอกอาคารในปัจจุบันที่ด้านบนของแผนที่ มีดัชนีเลเยอร์เฉพาะประเทศให้ใช้งาน
(ไปที่ส่วน: แสดงเลเยอร์แผนที่ความหนาแน่นของ API คุณภาพอากาศบนแผนที่)
แสดงข้อมูล API คุณภาพอากาศบนหมุดตำแหน่ง
- เลือกดัชนีสถานที่ตั้งของคุณ ซึ่งก็คือ AQI สากลหรือ AQI ระดับท้องถิ่น (มีดัชนีคุณภาพอากาศ (AQI) ที่แตกต่างกันสูงสุด 70 รายการ) ดัชนีคุณภาพอากาศ (AQI) คือมาตราวัดที่บางประเทศ เช่น EPA ของสหรัฐอเมริกา จัดระดับคุณภาพอากาศที่แตกต่างกัน ตามวิธีการคำนวณ แหล่งข้อมูล และวัตถุประสงค์ที่กำหนด
- เริ่มแสดงภาพค่า Air Quality API หลักและรหัสสีจากประสบการณ์การค้นหาสถานที่ได้โดยตรง
การแสดงผลเริ่มต้นจะมีได้เฉพาะรหัสสี
แสดงข้อมูล API คุณภาพอากาศเพิ่มเติมเมื่อเลือก PIN
- ความหมายของ AQI สากล / AQI ในท้องถิ่น
- ระดับสารมลพิษ ซึ่งเป็นหน่วยวัดอนุภาคและก๊าซในอากาศ ได้แก่ มลพิษจำเพาะ ความเข้มข้น แหล่งที่มา และผลกระทบ
- คำแนะนำด้านสุขภาพ ซึ่งเป็นการดำเนินการที่แนะนำสำหรับสภาวะคุณภาพอากาศปัจจุบัน
- คุณปรับระดับข้อมูลที่แสดงโดยค่าเริ่มต้นเพื่อตอบสนองความต้องการได้ โปรดทราบว่าจุดข้อมูลสำหรับสถานที่หนึ่งๆ มักมีประโยชน์เมื่อเทียบกับสถานที่อื่นๆ
ตัวอย่างที่แสดงส่วนคุณภาพอากาศ
{
"dateTime": "2023-08-09T10:00:00Z",
"regionCode": "fr",
"indexes": [
{
"code": "uaqi",
"displayName": "Universal AQI",
"aqi": 76,
"aqiDisplay": "76",
"color": {
"red": 0.4117647,
"green": 0.77254903,
"blue": 0.20392157
},
"category": "Good air quality",
"dominantPollutant": "pm10"
},
…
],
"pollutants": [
{
"code": "co",
"displayName": "CO",
"fullName": "Carbon monoxide",
"concentration": {
"value": 95.18,
"units": "PARTS_PER_BILLION"
}...
},
…
],
"healthRecommendations": -{
"generalPopulation": "With this level of air quality, you have no limitations. Enjoy the outdoors!",
"elderly": "If you start to feel respiratory discomfort such as coughing or breathing difficulties, consider red ...",
"lungDiseasePopulation": …
}
}
- หรือคุณจะค้นหาข้อมูลคุณภาพอากาศเมื่อโต้ตอบกับสถานที่เท่านั้นก็ได้
- คุณใช้ดัชนี Air Quality API เพื่อกรองสถานที่ใกล้เคียงได้ เช่น หากกำลังมองหาสวนสาธารณะในพื้นที่ คุณจะแสดงเฉพาะสวนสาธารณะที่มีคุณภาพอากาศดีเท่านั้น
การตอบสนองต่อคุณภาพอากาศ
...
"color":{
"red": 0.9490196,
"green": 0.98039216,
"blue": 0.019607844
}
...
แปลงเป็น RGB
var red = parseInt(colorResponse.red*255)|| 1; var green = parseInt(colorResponse.green*255)|| 1; var blue = parseInt(colorResponse.blue*255)|| 1; // --> output rgb(241,250,5)
แสดงเลเยอร์แผนที่ความหนาแน่นของ Air Quality API บนแผนที่
ชิ้นส่วนสีของแผนที่ความหนาแน่นเป็นวิธีที่เยี่ยมยอด
- เพื่อให้ภาพรวมของพื้นที่ขนาดใหญ่
- เพื่อแสดงความแตกต่างเล็กๆ น้อยๆ ในบริเวณนั้น
ใช้ Maps JavaScript API กับ ImateMapType เพื่อแสดงชิ้นส่วนแผนที่แต่ละรายการที่จำเป็นต่อการครอบคลุมวิวพอร์ตทั้งหมดของ Google Maps ชิ้นส่วนแผนที่ความหนาแน่นจะรีเฟรชเมื่อผู้ใช้มีส่วนร่วมกับแผนที่โดยการเลื่อน ซูม หรือเปลี่ยนตำแหน่ง
โปรดทราบว่าค่าระดับการซูมที่อนุญาตต้องไม่เกิน 16
เลเยอร์แผนที่ความร้อนของ Air Quality API อาจหายไปในการค้นหาแบบเจาะจงพื้นที่
คุณเลือกประเภทแผนที่ฮีตแมปภายในชุดดัชนีคุณภาพอากาศได้แบบจำกัด ดังนี้
อย่าลืมระบุสเกลสีเพื่อให้ผู้ใช้เข้าใจค่าและการจัดอันดับสี ดังนี้
- สเกลการไล่ระดับสี UAQI (0-100):
แย่ / ยอดเยี่ยม
ข้อมูลโค้ด CSS ชุดสี:
.gradient-scale {
background: linear-gradient(to right,
rgb(99, 20, 161) 0%, /* purple */
rgb(149, 0, 25) 20%, /* red */
rgb(248, 47, 21) 40%, /* orange */
rgb(255, 248, 35) 60%, /* yellow */
rgb(34,163,120) 80%, /* steelblue */
rgb(255,255,255) 100% /* white */
);
}
- สีทึบเพื่อแสดงประเด็นสำคัญในสเกล UAQI (0-100):
แย่ / ยอดเยี่ยม
จำนวนคำค้นหาและค่าใช้จ่ายที่เกี่ยวข้อง
- Maps JavaScript API: 1 แผนที่เมื่อโหลดประสบการณ์
- API คุณภาพอากาศ:
- 1 ข้อความค้นหาในทุกๆ สถานที่ (ทั้งหมดเมื่อโหลดแผนที่หรือเฉพาะรายการที่เลือกของผู้ใช้)
- ชั้นชิ้นส่วนแผนที่ความหนาแน่น: ภาพย่อยทุกภาพมีขนาด 256*256 พิกเซล และเพื่อให้ครอบคลุมแผนที่มาตรฐานที่แสดงบนอุปกรณ์เคลื่อนที่หรือเว็บ คุณต้องใช้ชิ้นส่วน 12-14 ภาพ ไทล์ที่ดึงแต่ละไทล์จะนับเป็น 1 หน่วย SKU
- API การค้นหาใกล้เคียง (ใหม่): 1 คำค้นหาทุกๆ 20 ตำแหน่งที่แสดง การเรียกเก็บเงินแตกต่างกันไปตามข้อมูลสถานที่ที่เป็นส่วนหนึ่งของคำตอบข้อความค้นหา
บทสรุป
เราแสดงให้เห็นว่า API คุณภาพอากาศเป็นจุดข้อมูลสำคัญให้ผู้ใช้ตัดสินใจเกี่ยวกับสถานที่ที่จะไป ดังนั้น ข้อมูลคุณภาพอากาศควรแสดงให้เห็นเร็วที่สุดเท่าที่จะเป็นไปได้ในประสบการณ์การค้นหา ด้วยความระมัดระวังกับจำนวนข้อมูลที่แสดงในครั้งเดียวและวิธีการแสดงข้อมูล
การดำเนินการถัดไป
อ่านเพิ่มเติมที่แนะนำ:
- ปรับปรุงการค้นพบในพื้นที่ด้วย API การค้นหาใกล้เคียง (ใหม่)
- ดูข้อมูลแบบเรียลไทม์ด้วยการจัดรูปแบบตามข้อมูล
ผู้ร่วมให้ข้อมูล
Google เป็นผู้ดูแลบทความนี้ ผู้เขียนต่อไปนี้เป็นคนเขียน
ผู้เขียนหลัก:
Thomas Anglaret | วิศวกรโซลูชัน