ดึงค่ามาแสดง polygon ลงฐานข้อมูล MySQL

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ดึงค่ามาแสดง polygon ลงฐานข้อมูล MySQL

ดึงค่ามาแสดง polygon ลงฐานข้อมูล MySQL

บันทึกค่าลงฐานข้อมูล

ผลลัพธ์ที่ได้ดึงตัวแปร arr_[ath มาแสดง

จรินทร์ญา ภาคพิชเจริญ 26-11-2018 18:50:07

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

รูปแบบการจัดเก็บข้อมูลข้างต้น จะได้รายการ array path ของ lat และ lon แยกกันด้วยการขึ้นบรรทัดใหม่
แนวทาง สมมติรูปแบบ การแสดง polygon แบบ ฟิกค่า ตามแนวทางตัวอย่าง

https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays

ดังนั้น เราต้องจัดรูปแบบข้อมูลที่ดึงมาให้อยู่ในรูปแบบ ดังนี้

ตัวอย่างโค้ดสมมติ แบบฟิกค่า ก่อนดึงข้อมูลจากฐานข้อมูล

<?php
// 3 บรรทัดนี้้ สำหรับป้องกันการ cache จำค่าเก่าตอนทพสอบ คงไว้ หรือเอาออกได้
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);   
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Polygon 01</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <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 {
        position:relative;
        width:550px;
        height:400px;
        margin:auto;/*  margin-top:100px;*/
    }
    #contain_map {
        position:relative;
        width:550px;
        height:400px;
        margin:auto;
        margin-top:10px;
    }
    /* css ของส่วนการกำหนดจุดเริ่มต้น และปลายทาง */ 
    #showDD {
        position:absolute;
        bottom:5px;
        /*    background-color:#000;  */
        color:#FFF;
    }
    #show_form_data {
        margin:auto;
        width:550px;
    }
    #hand_b {
        width:31px;
        height:31px;
        cursor:pointer;
        background-image: url(images/Bsu.png);
    }
    #hand_b.selected {
        background-image: url(images/Bsd.png);
    }
    #shape_b {
        width:31px;
        height:31px;
        cursor:pointer;
        background-image: url(images/Bpu.png);
    }
    #shape_b.selected {
        background-image: url(images/Bpd.png);
    }
    </style>
</head>
<body>
    
   <br>
   <div class="container-fluid">
        <div id="contain_map">
          <div id="map_canvas"></div>
          <div id="showDD">
            <table>
              <tr>
                <td><div id="hand_b"
             onclick="stopEditing()"/></td>
                <td><div id="shape_b"
            onclick="startShape()"/></td>
              </tr>
            </table>
          </div>
        </div>
    </div>
<script src="//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 จะได้เรียกใช้งานได้ง่ายขึ้น
var poly;
var polygon;
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
    var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
    var my_DivObj=$("#map_canvas")[0]; 
    // กำหนด Option ของแผนที่
    var myOptions = {
        zoom: 13, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map

	// array object ของ polygon  กรณีเราฟิกค่าเพื่อทดสอบ
	var polygonCoords = [
		{lat: 13.78223577870228, lng: 100.62867164611816},
		{lat: 13.769064611612139, lng: 100.62798500061035},
		{lat: 13.768064239482117, lng: 100.65991401672363},
		{lat: 13.785069983402076, lng: 100.66266059875488}		
	];	
	
	// จัดรูปแบบ polygon.
	polygon = new GGM.Polygon({
	  paths: polygonCoords, // array object  ของ  polygon
	  strokeColor: '#FF0000', // สีเส้น
	  strokeOpacity: 0.8, // ความโปร่งใสเส้น
	  strokeWeight: 3, // ความหนาเส้น
	  fillColor: '#FF0000', // สีของ polygon
	  fillOpacity: 0.35 // ความโปร่งใสของ polygon
	});
	polygon.setMap(map); // นำ polygon ไปแสดงในแผนที่
   
}
$(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&key=YOU_KEY&sensor=false&language=th&callback=initialize"
    }).appendTo("body");    
});
</script>      
</body>
</html>

ส่วนของ array path ที่เบื้องต้นเราฟิกค่า

กรณีดึงจากฐานข้อมูล

<?php
// 3 บรรทัดนี้้ สำหรับป้องกันการ cache จำค่าเก่าตอนทพสอบ คงไว้ หรือเอาออกได้
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);   
?>
<?php
// โค้ดไฟล์ dbconnect.php 
// https://www.ninenik.com/forum_view_2398_1.html#comment_5574
include("dbconnect.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Polygon 01</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <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 {
        position:relative;
        width:550px;
        height:400px;
        margin:auto;/*  margin-top:100px;*/
    }
    #contain_map {
        position:relative;
        width:550px;
        height:400px;
        margin:auto;
        margin-top:10px;
    }
    /* css ของส่วนการกำหนดจุดเริ่มต้น และปลายทาง */ 
    #showDD {
        position:absolute;
        bottom:5px;
        /*    background-color:#000;  */
        color:#FFF;
    }
    #show_form_data {
        margin:auto;
        width:550px;
    }
    #hand_b {
        width:31px;
        height:31px;
        cursor:pointer;
        background-image: url(images/Bsu.png);
    }
    #hand_b.selected {
        background-image: url(images/Bsd.png);
    }
    #shape_b {
        width:31px;
        height:31px;
        cursor:pointer;
        background-image: url(images/Bpu.png);
    }
    #shape_b.selected {
        background-image: url(images/Bpd.png);
    }
    </style>
</head>
<body>
    
   <br>
   <div class="container-fluid">
        <div id="contain_map">
          <div id="map_canvas"></div>
          <div id="showDD">
            <table>
              <tr>
                <td><div id="hand_b"
             onclick="stopEditing()"/></td>
                <td><div id="shape_b"
            onclick="startShape()"/></td>
              </tr>
            </table>
          </div>
        </div>
    </div>
    <pre>
<?php
// ฟังก์ชั่นจัดรูปแบบ
function _setPolygonPath($path){
	list($lat,$lon) = explode(",",$path);
	return "{lat: $lat, lng: $lon}";
}
// ฟังก์ชั่นจัดรูปแบบ สร้าง javascirpt array object 
function _pathObj($path){
	return "[".implode(",\r\n",$path)."]";
}
$sql = "
SELECT data FROM tbl_simple
";
$result = $mysqli->query($sql);
if($result){
	$row = $result->fetch_assoc();
	$arr_path = explode("\r\n",$row['data']); // แยกข้อมูลจากการขึ้นบรรทัดใหม่
	$path_obj = _pathObj(array_map("_setPolygonPath",$arr_path)); // จัดรูปแบบ
}
?>    
<script src="//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 จะได้เรียกใช้งานได้ง่ายขึ้น
var poly;
var polygon;
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
    var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
    var my_DivObj=$("#map_canvas")[0]; 
    // กำหนด Option ของแผนที่
    var myOptions = {
        zoom: 13, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map

	// array object ของ polygon  กรณีเราฟิกค่าเพื่อทดสอบ
/*	var polygonCoords = [
		{lat: 13.78223577870228, lng: 100.62867164611816},
		{lat: 13.769064611612139, lng: 100.62798500061035},
		{lat: 13.768064239482117, lng: 100.65991401672363},
		{lat: 13.785069983402076, lng: 100.66266059875488}		
	];	*/
	// กรณีใช้ค่าจากตัวแปร php ที่ดึงข้อมูลจาก database
	var polygonCoords = <?=$path_obj?>;
	// จัดรูปแบบ polygon.
	polygon = new GGM.Polygon({
	  paths: polygonCoords, // array object  ของ  polygon
	  strokeColor: '#FF0000', // สีเส้น
	  strokeOpacity: 0.8, // ความโปร่งใสเส้น
	  strokeWeight: 3, // ความหนาเส้น
	  fillColor: '#FF0000', // สีของ polygon
	  fillOpacity: 0.35 // ความโปร่งใสของ polygon
	});
	polygon.setMap(map); // นำ polygon ไปแสดงในแผนที่
   
}
$(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&key=YOUR_KEY&sensor=false&language=th&callback=initialize"
    }).appendTo("body");    
});
</script>      
</body>
</html>

ผลลัพธ์

ถ้าเราวิวซอร์สในส่วนของ array path ที่ใช้จากฐานข้อมูล จะเป็นดังนี้

ninenik 27-11-2018

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน