วันพุธที่ 11 เมษายน พ.ศ. 2555

ลองเล่นกับ Google Map API V.3 : สร้าง Street View แบบง่ายๆ


ช่วงนี้มีเวลาว่างเยอะหน่อยครับ ก็เลยศึกษา Service ของ Google Maps API ตัวนึง ชื่อว่า Street View เล่นๆครับ
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 ร่วมกันฐานข้อมูลครับ

4 ความคิดเห็น :

  1. สอนวิธีลงรูป panorama ใน street view ด้วยนะครับ และที่เอาโปรแกรมอะไรใช้ทำเป็น panorama 360 องศาอ่ะคับ รบกวนสอนด้วย อยากทำได้บ้างครับ

    ตอบลบ
  2. ไม่ระบุชื่อ3 กรกฎาคม 2555 13:53

    สอนวิธีลงรูป panorama ใน mapjak อัพลงเว็บไซต์หน่อนนะค่ะ

    ตอบลบ
  3. โทดทีครับ ^^'' ผมยังไม่ได้ศึกษาถึงขั้นนั้นเลยครับ

    ตอบลบ
  4. ไม่ระบุชื่อ9 ตุลาคม 2558 22:57

    ปักหมุดสถานที่ แล้วบันทึกลงฐานข้อมูล ทำยังไงครับ

    ตอบลบ