บันทึกตำแหน่งปัจจุบัน ใน google map ลงฐานข้อมูล ตอนที่ 2

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
google map ฐานข้อมูล ตำแหน่งปัจจุบัน

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ google map ฐานข้อมูล ตำแหน่งปัจจุบัน

ดูแล้ว 24,246 ครั้ง


ตอนที่ 2 สำหรับแสดงตำแหน่งเพื่อนๆ ใน google map จะเป็นการ
บันทึกตำแหน่งปัจจุบัน ของผู้ใช้ในขณะนั้น ลงฐานข้อมูล
โดยอ้างอิงรูปแบบฐานข้อมูลจากเนื้อหาก่อนหน้า
 
แสดงตำแหน่งเพื่อนๆ จากฐานข้อมูล ใน google map ตอนที่ 1 
 
โดยเนื้อหา ดัดแปลงมาจากบทความ
แสดงตำแหน่งปัจจุบัน ของคุณ ใน google map v3 อย่างง่าย 
 
ก่อนเริ่มดำเนินการ ก่อนอื่น การใช้งานส่วนนี้ จะมีการใช้งานตัวแปร
session โดยจะมีข้อมูลที่ต้องดึงมาไว้ในตัวแปรก่อน 3 ค่า รูปแบบประมาณนี้
 
// ในที่นี้ กำหนด ตัวแปร session ของสมาชิก ชื่อ 
// $_SESSION['ses_user_id']  เก็บ ไอดี ผู้ใช้
// $_SESSION['ses_user_name']  เก็บ ชื่อ ผู้ใช้
// $_SESSION['ses_user_icon']  เก็บ รูป ผู้ใช้

// ตัวอย่างค่าสำหรับทดสอบ
$_SESSION['ses_user_id']=1;
$_SESSION['ses_user_name']="Ninenik Narkdee";
$_SESSION['ses_user_icon']="https://www.ninenik.com/demo/photo_avatar.php";
 
โดยจะกำหนดค่าตอนสมาชิก ล็อกอิน หรือแก้ไขข้อมูล ตอนไหนก็ได้
ให้ด้ค่า ดังกล่าวเก็บไว้ในตัวแปร session

 
 
เมื่อได้มีการกำหนดค่าตัวแปร ดังกล่าวข้างต้นแล้ว
ต่อไป จะเป็นในส่วนของการ แสดงแผนที่ ระบุตำแหน่งปัจจุบันของผู้ใช้
และส่งค่าตำแหน่ง ไปบันทึกลงฐานข้อมูล
 
ไฟล์ แผนที่ ตัวอย่างกำหนดชื่อเป็น my_friend_location.php
คำอธิบายแสดงในโค้ด

<!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>Google Map API 3 - Friend 01</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:650px;
	height:500px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 12, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
		mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
			position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
			style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style 
		}
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map

    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี  
    if(navigator.geolocation){  
            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(position.coords.latitude,position.coords.longitude);  	
				$.post("save_location.php",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อมูล
					myPosition_lat:myPosition_lat,   // ส่งค่า latitude
					myPosition_lon:myPosition_lon  // ส่งค่า longitude
				},function(){
					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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>
 
ไฟล์ สำหรับบันทึกข้อมูล ชื่อ save_location.php
คำอธิบายแสดงในโค้ด

<?php
session_start(); // สำหรับ ใช้งาน session ที่เก็บ ไอดี และ ชื่อ ของสมาชิก
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
mysql_connect("localhost","root","") or die("Cannot connect the Server");  
mysql_select_db("test") or die("Cannot select database");  
mysql_query("set character set utf8");  


// ในที่นี้ กำหนด ตัวแปร session ของสมาชิก ชื่อ 
// $_SESSION['ses_user_id']  เก็บ ไอดี ผู้ใช้
// $_SESSION['ses_user_name']  เก็บ ชื่อ ผู้ใช้
// $_SESSION['ses_user_icon']  เก็บ รูป ผู้ใช้


// ตรวจสอบว่ามีการส่งคำค้นมาหรือไม่
if(isset($_SESSION['ses_user_id']) && $_SESSION['ses_user_id']!="" 
&& isset($_POST['myPosition_lat']) && $_POST['myPosition_lat']!=""
&& isset($_POST['myPosition_lon']) && $_POST['myPosition_lon']!="" 
){
	// ตรวจสอบว่า มีข้อมูล สมาชิก ไอดี นี้อยู่ก่อนหรือไม่ ถ้ามี	
	if(@mysql_num_rows(@mysql_query(" 
		SELECT user_id FROM user_position WHERE user_id='".$_SESSION['ses_user_id']."'
	"))>0){
		// ให้อัพเดทข้อมูล
		@mysql_query("
			UPDATE user_position SET 
			   user_name='".addslashes($_SESSION['ses_user_name'])."',
			   user_latitude='".trim($_POST['myPosition_lat'])."',
			   user_longitude='".trim($_POST['myPosition_lon'])."',
			   user_datetime='".date('Y-m-d H:i:s')."',
			   user_icons='".addslashes($_SESSION['ses_user_icon'])."'
			WHERE user_id='".$_SESSION['ses_user_id']."'		
		");
	}else{
		// ถ้าไม่มีให้เพิ่มข้อมูลใหม่
		@mysql_query("
			INSERT INTO user_position (
			   user_id,
			   user_name,
			   user_latitude,
			   user_longitude,
			   user_datetime,
			   user_icons
			) VALUES (
			   '".trim($_SESSION['ses_user_id'])."',
			   '".addslashes($_SESSION['ses_user_name'])."',
			   '".trim($_POST['myPosition_lat'])."',
			   '".trim($_POST['myPosition_lon'])."',
			   '".date('Y-m-d H:i:s')."',
			   '".addslashes($_SESSION['ses_user_icon'])."'
			)		
		");		
	}
	
}
?>
 
เนื้อหาในตอนที่ 3 จะเป็นการสร้างไฟล์ xml จากฐานข้อมูล
เพื่อดึงรายละเอียดของผู้ใช้ มาใช้งาน


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ