PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ใช้ gps ระบุตำแหน่ง และอัพเดท ตำแหน่งอัตโนมัติ ใน google map

09 October 2014 By


โค้ดและตัวอย่าง ต่อไปนี้ เป็นการใช้งาน google map แบบประยุกต์ สำหรับ
ใช้ในการระบุตำแหน่งปัจจุบัน และอัพเดท ตำแหน่งอัตโนมัติ เมื่อมีการเคลื่อนที่
หรือย้ายตำแหน่ง โดยการทำงาน จะใช้งาน 2 ส่วนที่สำคัญคือ
 
1. navigator.geolocation.getCurrentPosition
เพื่อกำหนดตำแหน่งปัจจุบันเริ่มต้นแค่ครั้งเดียวเมื่อเปิดแผนที่มาครั้งแรก
และจะมีการสร้างแผนที่ และ marker ครั้งแรกในส่วนนี้
 
2. navigator.geolocation.watchPosition
สำหรับอัพเดทตำแหน่งอัตโนมัติ โดยค่าตำแหน่งใหม่ที่อัพเดท จะได้ค่าใหม่ทุกครั้งที่ 
เมื่อตำแหน่งมีการเปลี่ยนแปลง และส่งค่าตำแหน่งกลับมาเรียบร้อยแล้ว นั่นหมายความว่า
ตำแหน่งใหม่ ไม่ได้ค่าทุกค่าที่เปลี่ยนแปลงโดยทันที  แต่จะขึ้นกับการส่งค่ากลับมาด้วยว่า
ใช้เวลานานมากน้อยเพียงใด 
 
ในส่วนที่สองนี้ จะมีการกำหนดตำแหน่ง marker ใหม่ ไปตามตำแหน่งที่เปลี่ยนแปลง
นอกจากนั้น ยังจะมีในส่วนของการนำค่าตำแหน่งส่งออกมาใส่แบบฟอร์ม สามารถนำไปบันทึก
หรือใช้งานอื่นๆ ได้
 
โค้ดที่แนะนำนี้ เหมาะกับการนำไปประยุกต์ใช้กับอุปกรณ์พกพา เช่น เมือถือ เนื่องจาก
การทำงาน จำเป็นต้องเปิดใช้งาน gps และ internet และอุปกรณ์ดังกล่าว จะต้องการ
เคลื่อนย้ายตำแหน่ง จึงจะเห็นการงานได้
 
ตัวอย่าง 
 


Latitude
Longitude
Zoom
 
โค้ดตัวอย่างทั้งหมด คำอธิบายแสดงในโค้ด
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Track GPS ใช้งาน watchlocation </title>
    <style type="text/css">  
    html { height: 100% }  
    body {   
        height:100%;  
        margin:0;padding:0;  
        font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;  
        font-size:12px;  
    }  
    /* css กำหนดความกว้าง ความสูงของแผนที่ */  
    #map_canvas {   
        width:550px;  
        height:400px;  
        margin:auto;  
        /*  margin-top:100px;*/  
    }  
    </style>    

</head>  
<body>  
<br>
<br>
<br>
<div id="map_canvas"></div>  
<div id="showDD" style="margin:auto;padding-top:5px;width:550px;">    
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">    
Latitude    
<input name="lat_value" type="text" id="lat_value" value="0" />  <br />  
Longitude    
<input name="lon_value" type="text" id="lon_value" value="0" />  <br />  
Zoom    
<input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />    
<br />  
<input type="submit" name="button" id="button" value="บันทึก" />    
</form>    
</div>   
   
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript" src="script.js"></script>    
</body>  
</html>  


ไฟล์ script.js 

var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
var my_Marker;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ  
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
  
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี    
    if(navigator.geolocation){    
            
            // หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
            navigator.geolocation.getCurrentPosition(function(position){    
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน           
                
                // สรัาง LatLng ตำแหน่ง สำหรับ google map  
                var pos = new GGM.LatLng(myPosition_lat,myPosition_lon);                     
                
                // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
                var my_DivObj=$("#map_canvas")[0];   
                
                // กำหนด Option ของแผนที่  
                var myOptions = {  
                    zoom: 16, // กำหนดขนาดการ zoom  
                    center: pos , // กำหนดจุดกึ่งกลาง  เป็นจุดที่เราอยู่ปัจจุบัน
                    mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่  
                    mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่  
                        position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง  
                        style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style   
                    }  
                };  
         
                map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map                      
              
               my_Marker = new GGM.Marker({ // สร้างตัว marker  
                    position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                    icon:"http://www.ninenik.com/demo/google_map/images/male-2.png",  
                    draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้  
                    title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                });                  
                
                // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
                GGM.event.addListener(map, "zoom_changed", function() {  
                    $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value    
                });                  
                
            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
        
            // ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
            // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
            navigator.geolocation.watchPosition(function(position){    
 
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน  
                               
                // สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
                var pos = new GGM.LatLng(myPosition_lat,myPosition_lon);     
                
                // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
                my_Marker.setPosition(pos);
                                    
                var my_Point = my_Marker.getPosition();  // ดึงตำแหน่งตัว marker  มาเก็บในตัวแปร
                $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value  
                $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value   
                $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value           
                
                map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน  
                map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                   
      

            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
          
    }else{    
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง    
    }     


  
}  
$(function(){  
    // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว  
    // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api  
    // v=3.2&sensor=false&language=th&callback=initialize  
    //  v เวอร์ชัน่ 3.2  
    //  sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false  
    //  language ภาษา th ,en เป็นต้น  
    //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize  
    $("<script/>", {  
      "type": "text/javascript",  
      src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  

Tags:: gps google map

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง