ASP.NET (C#, VB.NET)DeveloperGoogle Developers

Lab: ซ้อนรูปภาพ และข้อความลงบน Google Street View API

คราวนี้เราลองมาจับ Google Map API เรียกทำงานร่วมกับ Google Street View ให้สามารถดึงภาพจากเว็บไซต์ และข้อความมาปรากฏบบนหน้าแผนที่ ของ Google Street View กันแบบง่ายๆกันดีกว่าครับ

พอดีว่าลองเข้าศึกษาเพลินๆ ก็เลยได้ ชุด Source Code Library ของ Google Street view มาจากเว็บไซต์

 

และได้อ่าน และลองเล่นดูก็รู้สึกว่าไม่ง่ายครับ มาลองดูกันเลยดีกว่า ซึ่งตัว Source Code ที่ผมจะให้ดาวน์โหลดนี้สามารถใช้งานง่ายแต่เป็น API Key ของผมดังนั้นถ้าจะใช้ API Key ของตัวเองต้องไปสมัครก่อนที่ Google Code ครับ ไปค้นหาวิธีีสมัครกันเองนะ, ส่วนวิธีการแก้ไข Source Code หลังดาวน์โหลดไฟล์ไปแล้ว สามารถสอบถามได้ที่อีเมล์ daydevthailand@gmail.com หรือ Comment Facebook ด้านล่างได้เลยครับ

แทรกรูปภาพ และข้อความลงบน Google Street View
ก่อนอื่นดาวน์โหลดไฟล์ Source Code ก่อนที่นี่ครับ

Image on Map -Google Street View API (Version 1.0.0)

ทำการแตกไฟล์ออกมาแล้วแก้ไขตามนี้ครับ

เปลี่ยน API Key เป็นของคุณ หรือจะใช้ของผมก็ได้ ถ้าอยากให้ผมรู้ แคมเปญคุณ

ทำการเปลี่ยน API Key ครับ หลังจากนี้ก็ไปทำการ หาพิกัดของตัวจุดเริ่มต้น และ จุดที่จะให้ภาพปรากฏ โดยการเปิด Google Maps

จิ้มพิกัด คลิกขวา แล้วเลือกเมนูสุดท้าย ที่แถบการค้นหาสถานที่ จะกลายเป็นตัวเลข

ให้คลิกขวาที่ตำแหน่งแรกเป้นตำแหน่งของคุณก่อน ว่าจะให้เริ่มต้นที่ใด คลิกขวาแล้วจะพบคำว่า นี่คืออะไร หรือ What’s here ให้คลิก สังเกตที่แถบค้นหาตัวเลขจะกลายเป็น Lat, Lon ในภาพตัวอย่างคือพิกัด Lat=13.755785 และ Lon=100.49437 ให้นำไปใส่ตำแหน่งของคุณก่อน ที่บริเวณบรรทัดในรูป

ตำแหน่งเริ่มต้นของคุณ

ต่อมาทำอีกครั้งแต่เป็นตำแหน่งใหม่ที่ไม่ใช่ตำแหน่งเดิมแล้วนำ ไปแทรกใน Source Code เหมือนในรูป ซึ่งจะเป็นตำแหน่งที่เราต้องการให้ภาพ และข้อความปรากฏ

แทรกตำแหน่ง พิกัด สิ่งที่ต้องการให้ปรากฏลงไป

เสร็ขแล้วหา ภาพ และข้อความดีๆ มาแก้ไขใน code ซึ่งในที่นี่ผม ใช้ภาพชื่อว่า “mapsicle_marker_sm.png” ซึ่งก็คือภาพข้างล่าง

ไฟล์ภาพ mapsicle_marker_sm เป็น Transparent

เอาล่ะทำการ Upload ไฟล์ทั้งหมดขึ้นไปบน Host หรือเว็บไซต์ของคุณ แล้วลอง Preview

จุดเริ่มต้นไปไหนอี ใบ้ให้ ลองเคลื่อนที่ไปทางขวาสิ

ให้ลองเคลื่อนที่ จากตำแหน่งเริ่มต้นไปทางขวา เบาๆ ช้าๆ

บ๊ะแล้ว...

เจอจังๆ Auto Bot อาละวาด!!!!

ถ้าคิดว่าภาพข้างบนเป็นภาพตัดต่อ งั้นลองทดสอบกันข้างล่างเลย หรือไปที่ URL

กลายเป็นว่าการพัฒนาโปรแกรมกับ Google Street View นั้นไม่ได้ยากเลย ไม่แน่เด็กมัธยมยังทำได้ด้วยซ้ำไป แต่สิ่งที่จะทำให้ลูกเล่นเหล่านี้โดดเด่นนั้น ก็น่าจะเป็น จิตนาการ และการต่อยอด มากกว่าครับ

เพราะว่าแต่ละ โปรเจ็คที่ผมทำมาให้ดูเป็นตัวอย่างนี้ก็ล้วนเกิดจาก จิตนาการที่ว่า มันต้องทำได้สิ มันต้องทำได้ ดังนั้นเราก็เลยทำได้ครับ หวังว่าคงได้เอาไปใช้ประโยชน์กันนะครับ

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

One Comment

Leave a Reply

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน