ตอนที่ 2 สำหรับแสดงตำแหน่งเพื่อนๆ ใน google map จะเป็นการ
บันทึกตำแหน่งปัจจุบัน ของผู้ใช้ในขณะนั้น ลงฐานข้อมูล
โดยอ้างอิงรูปแบบฐานข้อมูลจากเนื้อหาก่อนหน้า
แสดงตำแหน่งเพื่อนๆ จากฐานข้อมูล ใน google map ตอนที่ 1
https://www.ninenik.com/content.php?arti_id=479 via @ninenik
โดยเนื้อหา ดัดแปลงมาจากบทความ
แสดงตำแหน่งปัจจุบัน ของคุณ ใน google map v3 อย่างง่าย
https://www.ninenik.com/content.php?arti_id=457 via @ninenik
ก่อนเริ่มดำเนินการ ก่อนอื่น การใช้งานส่วนนี้ จะมีการใช้งานตัวแปร
session โดยจะมีข้อมูลที่ต้องดึงมาไว้ในตัวแปรก่อน 3 ค่า รูปแบบประมาณนี้
1 2 3 4 5 6 7 8 9 | // ในที่นี้ กำหนด ตัวแปร 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
เมื่อได้มีการกำหนดค่าตัวแปร ดังกล่าวข้างต้นแล้ว
ต่อไป จะเป็นในส่วนของการ แสดงแผนที่ ระบุตำแหน่งปัจจุบันของผู้ใช้
และส่งค่าตำแหน่ง ไปบันทึกลงฐานข้อมูล
ไฟล์ แผนที่ ตัวอย่างกำหนดชื่อเป็น my_friend_location.php
คำอธิบายแสดงในโค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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 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
คำอธิบายแสดงในโค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <?phpsession_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 จากฐานข้อมูล
เพื่อดึงรายละเอียดของผู้ใช้ มาใช้งาน
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง