ตอนที่ 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 ค่า รูปแบบประมาณนี้
// ในที่นี้ กำหนด ตัวแปร 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 จากฐานข้อมูล
เพื่อดึงรายละเอียดของผู้ใช้ มาใช้งาน