แผนที่ Bing ในซีชาร์ฟวินฟอร์ม

บทความนี้สอนวิธีใส่แผนที่บิงค์ไว้ในเดกส์ทอปแอพภาษาซีชาร์ฟ โดยมีคุณสมบัติดังนี้

1. ป้อนค้นสถานที่เป็นภาษาไทยได้
2. ซูมเข้าออกได้
3. ใช้เมาส์ลากแพนได้
4. ดูเป็นภาพถ่ายดาวเทียมได้
5. ดูอาคารภาพนูนได้
6. แสดงพิกัตและอัตราการซูมในหน้าวินฟอร์มได้

สิ่งที่ท่านจะได้เรียนรู้จากบทความนี้

1. วิธีสมัครใช้งาน (ฟรี) Bing Maps API
2. วิธีบูรณาการแผนที่บิงค์กับเดกส์ทอปแอพภาษาซีชาร์ฟ
3. วิธีเขียนโค้ดภาษาจาวาสคริปต์เรียกเมธอดภาษาซีชาร์ฟ
4. วิธีเขียนโค้ดภาษาซีชาร์ฟเรียกฟังก์ขันภาษาจาวาสคริปต์
5. วิธีใช้งานโปรโตคอล REST

ดาวน์โหลดซอร์สโค้ด

ภาพบน: หน้าตาโปรแกรมเมื่อทำเสร็จแล้ว

ภาพบน: ก่อนจะเรียก API ของ Bing Map ท่านจำเป็นต้องมีคีย์ก่อน สมัครได้ฟรี ไปหน้านี้ แล้วกด Azure marketplace

ภาพบน: เมื่อกดแล้วจะมาหน้านี้ ให้กดที่ GET IT NOW

ภาพบน: เมื่อกดแล้วจะมาที่พอทัลของ Azure ให้ท่าน Sign-in แล้วกรอกรายการต่างๆ อย่างที่เห็นในภาพนี้ แน่ละว่า Pricing Tier เราชอบที่จะเลือกอันที่ีฟรีเพราะเราแค่ต้องการทดสอบ ยังไม่ได้จะไปใช้ในงานจริง

ภาพบน: สร้าง API เสร็จแล้วให้เข้าไปในหน้าของม้ันแล้วกดรูปลูกกุณแจเพื่อเอาคีย์ ให้ค้ัดลอกไว้ เดี๋ยวเราจะเอาไปแปะในโค้ด

ภาพบน: ถึงเวลาเขียนโค้ดแล้ว ให้เปิด Visual Studio แล้วสร้างโปรเจคแบบ C# Desktop (Win form) รายละเอียดเป็นอย่างที่เห็นในภาพนี้

ภาพบน: ใส่ WinForm หนึ่งอัน ใน WinForm นี้ให้ใส่คอนโทรลต่างๆ ดังต่อไปนี้

1. WebBrowser คอนโทรลเปิดหน้าเว็บ
2. Text box + Button ช่องกรอกข้อความและปุ่มค้นหา
3. Text box + Label ข้อความแสดงพิกัด (เลต-ลอง) 
4. Text box + Lable ข้อความแสดงอัตราการซูม

ภาพบน:  โค้ดหน้า WinForm ให้ใส่เนมสเปสต่างๆ ดังภาพนี้

ภาพบน: โค้ดหน้า WinForm จะมีเพียงสามเมธอด

ภาพบน: ในเมธอดคอนสทรักเตอร์เราจะใส่โค้ดระบุให้จาวาสคริปต์ในไฟล์ Map.html สามารถเรียกเมธอดภาษา C# ในหน้าวินฟอร์มนี้ได้ จากนั้นเปิดไฟล์ Map.html ในคอนโทรล myWebBrowser

ภาพบน: UpdateMapViewInfo คือเมธอดที่จะถูกเรียกจากจาวาสคริปต์ในไฟล์ Map.html เพื่ออัพเดต Label ที่แสดงพิกัตและอัตราการซูม

ภาพบน: นี่คือเมธอดที่จะทำงานเมื่อผู้ใช้กดปุ่ม Search มันจะไปเรียกเมธอด search ในจาวาสคริปต์ในไฟล์ Map.html ในนั้นจะมีโค้ดทำหน้าที่คิวรี Bing Map API

ภาพบน: ฟังก์ชัน GetMap เป็นโค้ดภาษาจาวาสคริปต์ในไฟล์ Map.html มีโค้ดสร้างออพเจ็กต์แผนที่ ท่านต้องใส่คีย์ที่ได้ตอนสร้าง API ไว้ในบรรทัดที่ 19

ภาพบน: ฟังก์ชัน  upDateMapViewInfo ทำหน้าที่อัพเดต Label ที่แสดงพิกัตและอัตราการซูมในหน้าวินฟอร์มเมื่อเราลากหรือย่อขยายแผนที่

ภาพบน: ฟังก์ชัน search ทำหน้าที่ส่งคิวรีไปยัง Bing Map API


เพียงเท่านี้ท่านก็จะได้แผนที่ไว้ใช้ในหน้าเดกส์ทอปแอพแล้ว ถ้าท่านขึ้เกียจป้อนโค้ดให้ดาวน์โหลดซอร์สโค้ด (เป็นวิสชวลสตูดิโอโซลูชัน) ได้จากลิงบนสุด

กรุณาใส่คำถามและความเห็นไว้ในคอมเมนท์ข้างล่าง เพียงหนึ่งคอมเมนท์จะเป็นกำลังใจให้ผมเขียนบทความต่อไปในวันพรุ่งนี้ ถ้าไม่มีคอมเมนท์ผมจะเลิกเขียนไปขายเต้าฮวย