Street View เป็นภาพมุมมองจากถนนทีถ่ายจากสถานที่จริง ซึงเป็นบริการที่ทำงานภายใน Google Maps สามารถเลือกมุมมองได้ถึง 360 องศา ประโยชน์ของมันก็คือ สามารถชมสถานที่ต่างๆ ที่ได้บรรยากาศจริง และสามารถจดจำสถานที่ได้ดีกว่าดูในแผนที่แบบปกติ เราสามารถดึงข้อมูลต่างๆของ Google Street View เอามาใช้กับร้านค้าออนไลน์ เพื่อใช้ระบุตำแหน่งและหน้าตาของร้านค้าของเรานั่นเองครับ มาดูโค๊ดตัวอย่างง่ายๆกันเลยครับ ขี้เกียจอธิบายมากครับ เพราะผมอธิบายไม่ค่อยเก่ง ^^’’
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Street View</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=th"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var lat='',lng='',mapsZoom='',heading='',pitch='',streetZoom=''; function myStreetView(){ var fenway = new google.maps.LatLng(18.788318,98.987931);//ละติจูด,ลองติจูด เริ่มที่เชียงใหม่ var mapOptions = { center: fenway,//ตำแหน่งเริ่มต้นของแผนที่ zoom: 8,//ซูมเริ่มต้นในแผนที่ mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);////เรียกใช้อ๊อบเจ็คของแผนที่ var panoramaOptions = {//เลือกObtionsการแสดงผลของ Street View position: fenway,//ตำแหน่งเริ่มต้น pov: { heading:4,//ระดับมุมมองซ้าย/ขวา pitch:10,//ระดับมุมมองบน/ล่าง zoom:1//ซูมเริ่มต้นใน Street View เป็น 1 } }; var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);//เรียกใช้อ๊อบเจ็คของStreet View map.setStreetView(panorama);//set Street view ให้กับแผนที่ mapsZoom=map.getZoom(); heading=panorama.getPov().heading; pitch=panorama.getPov().pitch; streetZoom=panorama.getPov().zoom; showStvValue(); google.maps.event.addListener(panorama, 'position_changed', function(){ //เมื่อมีการเปลี่ยนแปลงตำแหน่ง lat=panorama.getPosition().lat();//แสดงตำแหน่งละติจูดใหม่ lng=panorama.getPosition().lng();//แสดงตำแหน่งลองติจูดใหม่ showStvValue(); }); google.maps.event.addListener(panorama, 'pov_changed', function() {//เมื่อมีการเปลี่ยนระดับมุมมองที่StreetView heading=panorama.getPov().heading;//แสดงค่าระดับมุมมองซ้าย/ขวาใหม่ pitch=panorama.getPov().pitch;//แสดงค่าระดับมุมมองบน/ล่างใหม่ streetZoom=panorama.getPov().zoom;//แสดงค่าซูมในStreetView showStvValue(); }); google.maps.event.addListener(map,'zoom_changed',function(ev){//ซูมแผนที่ mapsZoom=map.getZoom();//แสดงค่าซูมใหม่ showStvValue(); }); } function showStvValue(){//แสดงค่าต่างๆของแผนที่ที่เราได้getออกมาEventต่างๆของแผนที่ แล้วเอามาแสดงในTextfield $('#lat').val(lat); $('#lng').val(lng); $('#mapsZoom').val(mapsZoom); $('#heading').val(heading); $('#pitch').val(pitch); $('#streetZoom').val(streetZoom); } $(document).ready(function(){ myStreetView();//เรียกฟังก์ชั่น }); </script> <style type="text/css"> body{ font-family:Tahoma, Geneva, sans-serif; font-size:12px; } </style> </head> <body> <div id="map_canvas" style="float:left;width:450px; height:350px"></div> <div id="pano" style="float:left;width:450px; height:350px"></div> <br style="clear:both;" /> ละติจูด : <input name="lat" id="lat" type="text" size="20" /> ลองติจูด : <input name="lng" id="lng" type="text" size="20" /><br /> Heading : <input name="heading" id="heading" type="text" size="20" /> Pitch : <input name="pitch" id="pitch" type="text" size="20" /><br /> ระดับซูมในแผนที่ : <input name="mapsZoom" id="mapsZoom" type="text" size="5" /> ระดับซูมในStreetView :<input name="streetZoom" id="streetZoom" type="text" size="20" /> </body> </html>นี่เป็นแค่ตัวอย่างง่ายๆครับ ผมได้ดึงข้อมูลที่สำคัญต่างๆออกมาแสดงใน Textfield ก็จะมี
ตำแหน่งละติจูด ,ตำแหน่งลองติจูด,Heading(มุมมองหมุนซ้าย/ขวา 360 องศา),Pitch(มุมมองก้ม/เงย),ค่าระดับซูมในแผนที่ ,ค่าระดับซูมในStreet View ให้คุณลองเอาโค๊ดของผมไปศึกษาให้เข้าใจก่อนครับ ว่ามีการดึงค่าต่างๆออกมายังไงบ้าง และมีEvent อะไรบ้างครับ และลองเอาไปประยุกต์ใช้กับเว็บของคุณดูครับ โดยสามารถศึกษาConceptการจัดเก็บข้อมูลแผนที่ลงฐานข้อมูลได้จากบทความนี้ไปก่อนครับ ลองเล่นกับ Google Map API V.3 : ประยุกต์ใช้ร่วมกับ PHP และฐานข้อมูล MySQL และว่างๆ คงเป็นช่วงหลังสงกรานต์ ผมจะสอนประยุกต์ใช้ Google Street View ร่วมกันฐานข้อมูลครับ
สอนวิธีลงรูป panorama ใน street view ด้วยนะครับ และที่เอาโปรแกรมอะไรใช้ทำเป็น panorama 360 องศาอ่ะคับ รบกวนสอนด้วย อยากทำได้บ้างครับ
ตอบลบสอนวิธีลงรูป panorama ใน mapjak อัพลงเว็บไซต์หน่อนนะค่ะ
ตอบลบโทดทีครับ ^^'' ผมยังไม่ได้ศึกษาถึงขั้นนั้นเลยครับ
ตอบลบปักหมุดสถานที่ แล้วบันทึกลงฐานข้อมูล ทำยังไงครับ
ตอบลบ