# แสดงข้อมูลตำแหน่งบนแผนที่  > สเก็ตโน้ตโดย [Nitya Narasimhan](https://github.com/nitya) คลิกที่ภาพเพื่อดูเวอร์ชันขนาดใหญ่ วิดีโอนี้ให้ภาพรวมเกี่ยวกับ Azure Maps กับ IoT ซึ่งเป็นบริการที่จะครอบคลุมในบทเรียนนี้ [](https://www.youtube.com/watch?v=P5i2GFTtb2s) > 🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอ ## แบบทดสอบก่อนเรียน [แบบทดสอบก่อนเรียน](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/25) ## บทนำ ในบทเรียนที่แล้ว คุณได้เรียนรู้วิธีการดึงข้อมูล GPS จากเซ็นเซอร์ของคุณและบันทึกลงในคลาวด์ในคอนเทนเนอร์จัดเก็บข้อมูลโดยใช้โค้ดแบบเซิร์ฟเวอร์เลส ตอนนี้คุณจะได้เรียนรู้วิธีการแสดงจุดเหล่านั้นบนแผนที่ Azure คุณจะได้เรียนรู้วิธีสร้างแผนที่บนหน้าเว็บ ทำความเข้าใจเกี่ยวกับรูปแบบข้อมูล GeoJSON และวิธีใช้มันเพื่อวางจุด GPS ที่จับได้ทั้งหมดบนแผนที่ของคุณ ในบทเรียนนี้เราจะครอบคลุม: * [การแสดงข้อมูลคืออะไร](../../../../../3-transport/lessons/3-visualize-location-data) * [บริการแผนที่](../../../../../3-transport/lessons/3-visualize-location-data) * [สร้างทรัพยากร Azure Maps](../../../../../3-transport/lessons/3-visualize-location-data) * [แสดงแผนที่บนหน้าเว็บ](../../../../../3-transport/lessons/3-visualize-location-data) * [รูปแบบ GeoJSON](../../../../../3-transport/lessons/3-visualize-location-data) * [วางข้อมูล GPS บนแผนที่โดยใช้ GeoJSON](../../../../../3-transport/lessons/3-visualize-location-data) > 💁 บทเรียนนี้จะมีการใช้ HTML และ JavaScript เล็กน้อย หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บโดยใช้ HTML และ JavaScript ลองดู [Web development for beginners](https://github.com/microsoft/Web-Dev-For-Beginners) ## การแสดงข้อมูลคืออะไร การแสดงข้อมูลตามชื่อคือการแสดงข้อมูลในรูปแบบที่ทำให้มนุษย์เข้าใจได้ง่ายขึ้น โดยปกติจะเกี่ยวข้องกับแผนภูมิและกราฟ แต่จริง ๆ แล้วคือการแสดงข้อมูลในรูปแบบภาพใด ๆ ที่ช่วยให้มนุษย์ไม่เพียงแค่เข้าใจข้อมูลได้ดีขึ้น แต่ยังช่วยให้ตัดสินใจได้ด้วย ลองดูตัวอย่างง่าย ๆ - ในโครงการฟาร์ม คุณได้บันทึกค่าความชื้นในดิน ตารางข้อมูลค่าความชื้นในดินที่บันทึกทุกชั่วโมงในวันที่ 1 มิถุนายน 2021 อาจมีลักษณะดังนี้: | วันที่ | ค่าที่อ่านได้ | | ---------------- | ------: | | 01/06/2021 00:00 | 257 | | 01/06/2021 01:00 | 268 | | 01/06/2021 02:00 | 295 | | 01/06/2021 03:00 | 305 | | 01/06/2021 04:00 | 325 | | 01/06/2021 05:00 | 359 | | 01/06/2021 06:00 | 398 | | 01/06/2021 07:00 | 410 | | 01/06/2021 08:00 | 429 | | 01/06/2021 09:00 | 451 | | 01/06/2021 10:00 | 460 | | 01/06/2021 11:00 | 452 | | 01/06/2021 12:00 | 420 | | 01/06/2021 13:00 | 408 | | 01/06/2021 14:00 | 431 | | 01/06/2021 15:00 | 462 | | 01/06/2021 16:00 | 432 | | 01/06/2021 17:00 | 402 | | 01/06/2021 18:00 | 387 | | 01/06/2021 19:00 | 360 | | 01/06/2021 20:00 | 358 | | 01/06/2021 21:00 | 354 | | 01/06/2021 22:00 | 356 | | 01/06/2021 23:00 | 362 | สำหรับมนุษย์ การทำความเข้าใจข้อมูลนี้อาจเป็นเรื่องยาก มันเป็นเพียงตัวเลขที่ไม่มีความหมายในเชิงภาพ ในขั้นตอนแรกของการแสดงข้อมูลนี้ สามารถวางลงในแผนภูมิเส้นได้:  สามารถปรับปรุงเพิ่มเติมได้โดยเพิ่มเส้นเพื่อแสดงจุดที่ระบบรดน้ำอัตโนมัติเปิดทำงานเมื่อค่าความชื้นในดินถึง 450:  แผนภูมินี้แสดงให้เห็นอย่างรวดเร็วไม่เพียงแค่ค่าความชื้นในดิน แต่ยังแสดงจุดที่ระบบรดน้ำเปิดทำงาน แผนภูมิไม่ใช่เครื่องมือเดียวในการแสดงข้อมูล อุปกรณ์ IoT ที่ติดตามสภาพอากาศสามารถมีแอปเว็บหรือแอปมือถือที่แสดงสภาพอากาศโดยใช้สัญลักษณ์ เช่น สัญลักษณ์เมฆสำหรับวันที่มีเมฆ สัญลักษณ์เมฆฝนสำหรับวันที่ฝนตก เป็นต้น มีวิธีการแสดงข้อมูลมากมาย ทั้งแบบจริงจังและแบบสนุกสนาน ✅ ลองคิดถึงวิธีที่คุณเคยเห็นการแสดงข้อมูล วิธีใดที่ชัดเจนที่สุดและช่วยให้คุณตัดสินใจได้เร็วที่สุด? การแสดงข้อมูลที่ดีที่สุดช่วยให้มนุษย์ตัดสินใจได้เร็ว ตัวอย่างเช่น การมีแผงหน้าปัดที่แสดงค่าต่าง ๆ จากเครื่องจักรอุตสาหกรรมอาจยากต่อการประมวลผล แต่การมีไฟกระพริบสีแดงเมื่อเกิดปัญหาช่วยให้มนุษย์ตัดสินใจได้ทันที บางครั้งการแสดงข้อมูลที่ดีที่สุดคือไฟกระพริบ! เมื่อทำงานกับข้อมูล GPS การแสดงข้อมูลที่ชัดเจนที่สุดคือการวางข้อมูลบนแผนที่ แผนที่ที่แสดงรถบรรทุกส่งของ เช่น สามารถช่วยให้พนักงานที่โรงงานแปรรูปเห็นว่ารถบรรทุกจะมาถึงเมื่อใด หากแผนที่นี้แสดงมากกว่ารูปภาพของรถบรรทุกในตำแหน่งปัจจุบัน แต่ให้ข้อมูลเกี่ยวกับสิ่งที่อยู่ในรถบรรทุก พนักงานที่โรงงานสามารถวางแผนได้ตามนั้น - หากพวกเขาเห็นรถบรรทุกที่มีระบบทำความเย็นอยู่ใกล้ ๆ พวกเขาจะรู้ว่าต้องเตรียมพื้นที่ในตู้เย็น ## บริการแผนที่ การทำงานกับแผนที่เป็นเรื่องที่น่าสนใจ และมีตัวเลือกมากมาย เช่น Bing Maps, Leaflet, Open Street Maps และ Google Maps ในบทเรียนนี้ คุณจะได้เรียนรู้เกี่ยวกับ [Azure Maps](https://azure.microsoft.com/services/azure-maps/?WT.mc_id=academic-17441-jabenn) และวิธีการแสดงข้อมูล GPS ของคุณ  Azure Maps คือ "ชุดบริการและ SDK ด้านภูมิศาสตร์ที่ใช้ข้อมูลแผนที่ล่าสุดเพื่อให้บริบททางภูมิศาสตร์แก่แอปพลิเคชันเว็บและมือถือ" นักพัฒนาจะได้รับเครื่องมือในการสร้างแผนที่ที่สวยงามและโต้ตอบได้ ซึ่งสามารถทำสิ่งต่าง ๆ เช่น แนะนำเส้นทางจราจร ให้ข้อมูลเกี่ยวกับเหตุการณ์จราจร การนำทางภายใน การค้นหา ข้อมูลระดับความสูง บริการสภาพอากาศ และอื่น ๆ ✅ ลองทดลองกับ [ตัวอย่างโค้ดแผนที่](https://docs.microsoft.com/samples/browse?WT.mc_id=academic-17441-jabenn&products=azure-maps) คุณสามารถแสดงแผนที่เป็นผืนผ้าเปล่า แผ่นกระเบื้อง ภาพถ่ายดาวเทียม ภาพถ่ายดาวเทียมที่มีถนนซ้อนทับ แผนที่สีเทาแบบต่าง ๆ แผนที่ที่มีเงาแสดงระดับความสูง แผนที่มุมมองกลางคืน และแผนที่ที่มีความคอนทราสต์สูง คุณสามารถรับการอัปเดตแบบเรียลไทม์บนแผนที่ของคุณโดยการรวมเข้ากับ [Azure Event Grid](https://azure.microsoft.com/services/event-grid/?WT.mc_id=academic-17441-jabenn) คุณสามารถควบคุมพฤติกรรมและรูปลักษณ์ของแผนที่ของคุณโดยเปิดใช้งานการควบคุมต่าง ๆ เพื่อให้แผนที่ตอบสนองต่อเหตุการณ์ เช่น การบีบ การลาก และการคลิก เพื่อควบคุมรูปลักษณ์ของแผนที่ คุณสามารถเพิ่มเลเยอร์ที่รวมถึงฟองอากาศ เส้น รูปหลายเหลี่ยม แผนที่ความร้อน และอื่น ๆ รูปแบบแผนที่ที่คุณเลือกใช้งานขึ้นอยู่กับ SDK ที่คุณเลือก คุณสามารถเข้าถึง API ของ Azure Maps ได้โดยใช้ [REST API](https://docs.microsoft.com/javascript/api/azure-maps-rest/?WT.mc_id=academic-17441-jabenn&view=azure-maps-typescript-latest), [Web SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control?WT.mc_id=academic-17441-jabenn) หรือหากคุณกำลังสร้างแอปมือถือ คุณสามารถใช้ [Android SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-android-map-control-library?WT.mc_id=academic-17441-jabenn&pivots=programming-language-java-android) ในบทเรียนนี้ คุณจะใช้ Web SDK เพื่อวาดแผนที่และแสดงเส้นทางตำแหน่ง GPS ของเซ็นเซอร์ของคุณ ## สร้างทรัพยากร Azure Maps ขั้นตอนแรกของคุณคือการสร้างบัญชี Azure Maps ### งาน - สร้างทรัพยากร Azure Maps 1. รันคำสั่งต่อไปนี้จาก Terminal หรือ Command Prompt เพื่อสร้างทรัพยากร Azure Maps ในกลุ่มทรัพยากร `gps-sensor`: ```sh az maps account create --name gps-sensor \ --resource-group gps-sensor \ --accept-tos \ --sku S1 ``` คำสั่งนี้จะสร้างทรัพยากร Azure Maps ชื่อ `gps-sensor` โดยใช้ระดับ `S1` ซึ่งเป็นระดับที่มีค่าใช้จ่าย แต่มีจำนวนการเรียกใช้งานฟรีที่เพียงพอ > 💁 หากต้องการดูค่าใช้จ่ายในการใช้ Azure Maps ลองดูที่ [หน้าราคาของ Azure Maps](https://azure.microsoft.com/pricing/details/azure-maps/?WT.mc_id=academic-17441-jabenn) 1. คุณจะต้องใช้ API key สำหรับทรัพยากรแผนที่ ใช้คำสั่งต่อไปนี้เพื่อรับคีย์นี้: ```sh az maps account keys list --name gps-sensor \ --resource-group gps-sensor \ --output table ``` คัดลอกค่าของ `PrimaryKey` ไว้ ## แสดงแผนที่บนหน้าเว็บ ตอนนี้คุณสามารถดำเนินการขั้นตอนถัดไปเพื่อแสดงแผนที่บนหน้าเว็บ เราจะใช้เพียงไฟล์ `html` ไฟล์เดียวสำหรับเว็บแอปขนาดเล็กของคุณ โปรดทราบว่าในสภาพแวดล้อมการผลิตหรือการทำงานเป็นทีม เว็บแอปของคุณอาจมีส่วนประกอบมากกว่านี้! ### งาน - แสดงแผนที่บนหน้าเว็บ 1. สร้างไฟล์ชื่อ index.html ในโฟลเดอร์บนคอมพิวเตอร์ของคุณ เพิ่ม HTML markup เพื่อแสดงแผนที่: ```html

``` แผนที่จะโหลดใน `div` ชื่อ `myMap` สไตล์บางส่วนช่วยให้มันครอบคลุมความกว้างและความสูงของหน้า > 🎓 `div` คือส่วนหนึ่งของหน้าเว็บที่สามารถตั้งชื่อและปรับแต่งได้ 1. ใต้แท็ก `` ที่เปิดอยู่ เพิ่ม style sheet ภายนอกเพื่อควบคุมการแสดงแผนที่ และ script ภายนอกจาก Web SDK เพื่อจัดการพฤติกรรมของมัน: ```html ``` style sheet นี้มีการตั้งค่าสำหรับรูปลักษณ์ของแผนที่ และไฟล์ script มีโค้ดสำหรับโหลดแผนที่ การเพิ่มโค้ดนี้คล้ายกับการรวมไฟล์ header ใน C++ หรือการนำเข้าโมดูลใน Python 1. ใต้ script นั้น เพิ่ม script block เพื่อเปิดใช้งานแผนที่ ```javascript ``` แทนที่ `` ด้วย API key สำหรับบัญชี Azure Maps ของคุณ หากคุณเปิดหน้า `index.html` ในเว็บเบราว์เซอร์ คุณควรเห็นแผนที่ที่โหลดและโฟกัสไปที่พื้นที่ Seattle  ✅ ลองทดลองกับพารามิเตอร์ zoom และ center เพื่อเปลี่ยนการแสดงแผนที่ คุณสามารถเพิ่มพิกัดที่แตกต่างกันซึ่งสอดคล้องกับละติจูดและลองจิจูดของข้อมูลของคุณเพื่อเปลี่ยนตำแหน่งศูนย์กลางของแผนที่ > 💁 วิธีที่ดีกว่าในการทำงานกับเว็บแอปในเครื่องคือการติดตั้ง [http-server](https://www.npmjs.com/package/http-server) คุณจะต้องติดตั้ง [node.js](https://nodejs.org/) และ [npm](https://www.npmjs.com/) ก่อนใช้งานเครื่องมือนี้ เมื่อเครื่องมือเหล่านี้ติดตั้งแล้ว คุณสามารถไปยังตำแหน่งของไฟล์ `index.html` และพิมพ์ `http-server` เว็บแอปจะเปิดบนเว็บเซิร์ฟเวอร์ในเครื่อง [http://127.0.0.1:8080/](http://127.0.0.1:8080/) ## รูปแบบ GeoJSON ตอนนี้คุณมีเว็บแอปที่แสดงแผนที่แล้ว คุณต้องดึงข้อมูล GPS จากบัญชีจัดเก็บข้อมูลของคุณและแสดงมันในเลเยอร์ของเครื่องหมายบนแผนที่ ก่อนที่เราจะทำเช่นนั้น ลองดูที่ [GeoJSON](https://wikipedia.org/wiki/GeoJSON) รูปแบบที่จำเป็นสำหรับ Azure Maps [GeoJSON](https://geojson.org/) เป็นมาตรฐาน JSON แบบเปิดที่มีการจัดรูปแบบพิเศษที่ออกแบบมาเพื่อจัดการข้อมูลเฉพาะทางภูมิศาสตร์ คุณสามารถเรียนรู้เกี่ยวกับมันโดยการทดสอบข้อมูลตัวอย่างโดยใช้ [geojson.io](https://geojson.io) ซึ่งเป็นเครื่องมือที่มีประโยชน์ในการดีบักไฟล์ GeoJSON ตัวอย่างข้อมูล GeoJSON มีลักษณะดังนี้: ```json { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -2.10237979888916, 57.164918677004714 ] } } ] } ``` สิ่งที่น่าสนใจเป็นพิเศษคือวิธีที่ข้อมูลถูกจัดเป็น `Feature` ภายใน `FeatureCollection` ภายในวัตถุนั้นจะมี `geometry` พร้อม `coordinates` ที่ระบุละติจูดและลองจิจูด ✅ เมื่อสร้าง geoJSON ของคุณ ให้ใส่ใจลำดับของ `latitude` และ `longitude` ในวัตถุ มิฉะนั้นจุดของคุณจะไม่ปรากฏในตำแหน่งที่ควรจะเป็น! GeoJSON คาดหวังข้อมูลในลำดับ `lon,lat` สำหรับจุด ไม่ใช่ `lat,lon` `Geometry` สามารถมีประเภทต่าง ๆ เช่น จุดเดียวหรือรูปหลายเหลี่ยม ในตัวอย่างนี้ มันเป็นจุดที่มีพิกัดสองตัวที่ระบุ ลองจิจูดและละติจูด ✅ Azure Maps รองรับ GeoJSON มาตรฐาน พร้อมทั้ง [ฟีเจอร์เพิ่มเติม](https://docs.microsoft.com/azure/azure-maps/extend-geojson?WT.mc_id=academic-17441-jabenn) เช่น ความสามารถในการวาดวงกลมและรูปทรงเรขาคณิตอื่น ๆ ## แสดงข้อมูล GPS บนแผนที่โดยใช้ GeoJSON ตอนนี้คุณพร้อมที่จะใช้ข้อมูลจากพื้นที่จัดเก็บที่คุณสร้างขึ้นในบทเรียนก่อนหน้าแล้ว เพื่อเป็นการเตือนความจำ ข้อมูลนี้ถูกจัดเก็บเป็นไฟล์จำนวนหนึ่งใน blob storage ดังนั้นคุณจะต้องดึงไฟล์เหล่านั้นและแปลงข้อมูลเพื่อให้ Azure Maps สามารถใช้งานได้ ### งาน - ตั้งค่าพื้นที่จัดเก็บให้สามารถเข้าถึงได้จากหน้าเว็บ หากคุณเรียกพื้นที่จัดเก็บเพื่อดึงข้อมูล คุณอาจแปลกใจที่เห็นข้อผิดพลาดปรากฏในคอนโซลของเบราว์เซอร์ นั่นเป็นเพราะคุณต้องตั้งค่าการอนุญาตสำหรับ [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) บนพื้นที่จัดเก็บนี้เพื่อให้แอปเว็บภายนอกสามารถอ่านข้อมูลได้ > 🎓 CORS ย่อมาจาก "Cross-Origin Resource Sharing" และมักจะต้องตั้งค่าอย่างชัดเจนใน Azure ด้วยเหตุผลด้านความปลอดภัย มันช่วยป้องกันเว็บไซต์ที่คุณไม่คาดคิดจากการเข้าถึงข้อมูลของคุณ 1. รันคำสั่งต่อไปนี้เพื่อเปิดใช้งาน CORS: ```sh az storage cors add --methods GET \ --origins "*" \ --services b \ --account-name \ --account-key ``` แทนที่ `` ด้วยชื่อบัญชีพื้นที่จัดเก็บของคุณ และแทนที่ `` ด้วยคีย์บัญชีสำหรับพื้นที่จัดเก็บของคุณ คำสั่งนี้อนุญาตให้เว็บไซต์ใด ๆ (เครื่องหมายดอกจัน `*` หมายถึงใด ๆ) ทำการร้องขอแบบ *GET* เพื่อดึงข้อมูลจากบัญชีพื้นที่จัดเก็บของคุณ `--services b` หมายถึงการตั้งค่านี้ใช้เฉพาะกับ blobs เท่านั้น ### งาน - โหลดข้อมูล GPS จากพื้นที่จัดเก็บ 1. แทนที่เนื้อหาทั้งหมดของฟังก์ชัน `init` ด้วยโค้ดต่อไปนี้: ```javascript fetch("https://.blob.core.windows.net/gps-data/?restype=container&comp=list") .then(response => response.text()) .then(str => new window.DOMParser().parseFromString(str, "text/xml")) .then(xml => { let blobList = Array.from(xml.querySelectorAll("Url")); blobList.forEach(async blobUrl => { loadJSON(blobUrl.innerHTML) }); }) .then( response => { map = new atlas.Map('myMap', { center: [-122.26473, 47.73444], zoom: 14, authOptions: { authType: "subscriptionKey", subscriptionKey: "", } }); map.events.add('ready', function () { var source = new atlas.source.DataSource(); map.sources.add(source); map.layers.add(new atlas.layer.BubbleLayer(source)); source.add(features); }) }) ``` แทนที่ `` ด้วยชื่อบัญชีพื้นที่จัดเก็บของคุณ และแทนที่ `` ด้วย API key สำหรับบัญชี Azure Maps ของคุณ มีหลายสิ่งที่เกิดขึ้นในที่นี้ อันดับแรก โค้ดจะดึงข้อมูล GPS ของคุณจาก blob container โดยใช้ URL endpoint ที่สร้างขึ้นจากชื่อบัญชีพื้นที่จัดเก็บของคุณ URL นี้ดึงข้อมูลจาก `gps-data` ซึ่งระบุว่าประเภททรัพยากรคือ container (`restype=container`) และแสดงข้อมูลเกี่ยวกับ blobs ทั้งหมด รายการนี้จะไม่ส่งคืน blobs เอง แต่จะส่งคืน URL สำหรับแต่ละ blob ที่สามารถใช้โหลดข้อมูล blob ได้ > 💁 คุณสามารถใส่ URL นี้ลงในเบราว์เซอร์เพื่อดูรายละเอียดของ blobs ทั้งหมดใน container ของคุณ แต่ละรายการจะมี property `Url` ที่คุณสามารถโหลดในเบราว์เซอร์เพื่อดูเนื้อหาของ blob ได้เช่นกัน โค้ดนี้จะโหลดแต่ละ blob โดยเรียกฟังก์ชัน `loadJSON` ซึ่งจะถูกสร้างขึ้นในขั้นตอนถัดไป จากนั้นจะสร้าง map control และเพิ่มโค้ดใน event `ready` ซึ่งจะถูกเรียกเมื่อแผนที่แสดงบนหน้าเว็บ event `ready` จะสร้าง Azure Maps data source - container ที่มีข้อมูล GeoJSON ซึ่งจะถูกเติมข้อมูลในภายหลัง data source นี้จะถูกใช้เพื่อสร้าง bubble layer - ชุดวงกลมบนแผนที่ที่มีจุดศูนย์กลางอยู่ที่แต่ละจุดใน GeoJSON 1. เพิ่มฟังก์ชัน `loadJSON` ลงใน script block ของคุณ ด้านล่างฟังก์ชัน `init`: ```javascript var map, features; function loadJSON(file) { var xhr = new XMLHttpRequest(); features = []; xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { gps = JSON.parse(xhr.responseText) features.push( new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)])) ) } } }; xhr.open("GET", file, true); xhr.send(); } ``` ฟังก์ชันนี้ถูกเรียกโดย fetch routine เพื่อแปลงข้อมูล JSON และแปลงให้สามารถอ่านเป็นพิกัดลองจิจูดและละติจูดในรูปแบบ geoJSON เมื่อแปลงแล้ว ข้อมูลจะถูกตั้งค่าเป็นส่วนหนึ่งของ geoJSON `Feature` แผนที่จะถูกเริ่มต้น และวงกลมเล็ก ๆ จะปรากฏรอบเส้นทางที่ข้อมูลของคุณกำลังแสดง: 1. โหลดหน้า HTML ในเบราว์เซอร์ของคุณ แผนที่จะโหลด จากนั้นจะโหลดข้อมูล GPS ทั้งหมดจากพื้นที่จัดเก็บและแสดงบนแผนที่  > 💁 คุณสามารถค้นหาโค้ดนี้ได้ใน [code](../../../../../3-transport/lessons/3-visualize-location-data/code) folder --- ## 🚀 ความท้าทาย การแสดงข้อมูลแบบคงที่บนแผนที่เป็นเครื่องหมายเป็นสิ่งที่ดี คุณสามารถปรับปรุงเว็บแอปนี้เพื่อเพิ่มแอนิเมชันและแสดงเส้นทางของเครื่องหมายตามเวลา โดยใช้ไฟล์ json ที่มีการประทับเวลาได้หรือไม่? นี่คือ [ตัวอย่างบางส่วน](https://azuremapscodesamples.azurewebsites.net/) ของการใช้แอนิเมชันในแผนที่ ## แบบทดสอบหลังการบรรยาย [แบบทดสอบหลังการบรรยาย](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/26) ## ทบทวนและศึกษาด้วยตนเอง Azure Maps มีประโยชน์อย่างยิ่งสำหรับการทำงานกับอุปกรณ์ IoT * ศึกษาการใช้งานบางส่วนใน [เอกสาร Azure Maps บน Microsoft docs](https://docs.microsoft.com/azure/azure-maps/tutorial-iot-hub-maps?WT.mc_id=academic-17441-jabenn) * เพิ่มพูนความรู้เกี่ยวกับการสร้างแผนที่และจุดทางผ่านด้วย [โมดูลการเรียนรู้ด้วยตนเองเกี่ยวกับการสร้างแอปค้นหาเส้นทางแรกของคุณด้วย Azure Maps บน Microsoft Learn](https://docs.microsoft.com/learn/modules/create-your-first-app-with-azure-maps/?WT.mc_id=academic-17441-jabenn) ## งานที่ได้รับมอบหมาย [ปรับใช้แอปของคุณ](assignment.md) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้