ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

ช่วยดูโค้ด google map ให้น่อยน่ะค่ะ ติดตรงบแสดงจุดเป็นภาพ

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ช่วยดูโค้ด google map ให้น่อยน่ะค่ะ ติดตรงบแสดงจุดเป็นภาพ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

ช่วยดูโค้ด google map ให้น่อยน่ะค่ะ ติดตรงบแสดงจุดเป็นภาพ

ขอ รบกวนน่อยน่ะค่ะ พอดีหนูอยากให้ ไอคอน จุด มันเป็น รูปภาพที่ดึงมาจากฐานข้อมูลของแต่ละที่อ่าค่ะ แต่ตอนนี้ มัน ไม่แสดงภาพของแต่ละที่ แต่ตอนนี้มันแสดงเป็นภาพเดียวทุกจุด ทั้งๆที่แต่ละจุดเก็บภาพต่างกัน อ่ะค่ะ หนูต้องแก้โค้ดตรงไหน บ้างค่ะ หรือหนูใส่โค้ดไม่ถูก ช่วยแนะนำน่อยน่ะค่ะ ขอบคุณมากๆค่ะ

   <!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>เว็บท่องเที่ยวอำเภอเกาะสมุย</title>
<link href="css/main2.css" rel="stylesheet" type="text/css" />
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</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:800px;
            height:800px;
            margin:auto;
            margin-top:50px;
        }
        </style>
    </head>
    <body background="images/images/bg-content.jpg">
   <div id="container">
        <div id="header"></div>
            <div id="boxbuton">
                   <a href="index.php" target="_blank" id="home"></a>
                <a href="index360.php" target="_blank" id="TOURISM"></a>
                <a href="map_360.php" target="_blank" id="MAP"></a>
                <a href="searchroutes.php" target="_blank" id="SEARCH"></a>
                <a href="#" target="_blank" id="CONTACT"></a>            </div>


        <div id="content">

        <?php
$dbserver = 'localhost';
$dbuser = 'root' ;
$dbpass= "root";
$dbname= 'project360_2';
error_reporting(E_ALL ^ E_NOTICE);
mysql_connect($dbserver, $dbuser, $dbpass) or die("เชื่อมต่อฐานข้อมูลไม่ได้ ");
mysql_select_db($dbname) or die("เลือกฐานข้อมูลไม่ได้"); // เลือกฐานข้อมูล
mysql_query("SET NAMES UTF8");
?>

<?php
$sql = mysql_query("select * from uploadfile");
//$num = mysql_num_rows($sql);
//if ($num>0){
   while ($r=mysql_fetch_array($sql))   {
   //   ++$i;
   //   $i != $num ? $k=',' : $k='';

?>
      <br>
       <div style="margin:auto:width:80%;">
           <div id="map_canvas"></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 my_Marker=[]; // สำหรับปักหมุด
    var obj_marker; // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล
    var limit_show=1; // กำหนดแสดงรายการไม่เกิน
    var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
    var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
    function initialize() { // ฟังก์ชันแสดงแผนที่
        GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
        // กำหนดจุดเริ่มต้นของแผนที่
        var my_Latlng = new GGM.LatLng(9.517877, 100.012822);
        // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
        var my_DivObj=$("#map_canvas")[0];
        // กำหนด Option ของแผนที่
        var myOptions = {
            zoom: 10, // กำหนดขนาดการ 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

        image1 = new GGM.MarkerImage("myfile/<?=$r[Tour_image]?>", // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
                new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons
                new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
                new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
                );

        // ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ json
        $.getJSON( "get_marker.php", function( data ) {
            obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
            var m=0;
             $.each(obj_marker,function(i,k){ // วนลูปแสดงการปักหมุด
                     if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
                        var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);
                        my_Marker[i] = new GGM.Marker({ // sางตัว marker
                            position:markerLatLng,

                            icon: image1, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                            map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                            title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                        });

                        // กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
                          infowindow[i] = new GGM.InfoWindow({
                              content:$.ajax({
                                  url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
                                  data:'placeID='+obj_marker[i].province_id, // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
                                 async:false
                          }).responseText
                                                    });

                         // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
                        GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
                            if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                                infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                            }
                            infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
                            infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
                        });
                        m++;
                     }

             });
        });


        // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
        GGM.event.addListener(map, 'zoom_changed', function() {
            // วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่
            if(my_Marker.length>0){
                for(i=0;i<my_Marker.length;i++){
                    my_Marker[i].setMap(null);
                }
            }
            var m=0;
            var map_zoom=map.getZoom();
            // zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ
            if(map_zoom<=9){
                limit_show=1;
            }else if(map_zoom<11){
                limit_show=3;
            }else if(map_zoom<=12){
                limit_show=5;
            }else if(map_zoom<=13){
                limit_show=10;
            }else{
                limit_show=100;
            }
            image1 = new GGM.MarkerImage("myfile/<?=$r[Tour_image]?>", // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
                new GGM.Size(50,50), //กำหนดความกว้าง สูงของ icons
                new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
                new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
                );
             $.each(obj_marker,function(i,k){ // วนลูปแสดงการปักหมุด
                     if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show

                        var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);
                        my_Marker[i] = new GGM.Marker({ // สร้างตัว marker
                            position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                            icon: image1,
                            map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                            title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                        });

                        // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                       // infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
                           // content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
                       //});
                        // กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
                            infowindow[i] = new GGM.InfoWindow({
                             content:$.ajax({
                                  url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
                               data:'placeID='+obj_marker[i].province_id, // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
                                 async:false
                              }).responseText
                            });

                         // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
                        GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
                            if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                                infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                            }
                            infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
                            infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
                        });
                        m++;
                     }
             });

        });


    } // <?
   }
//}

?>
    $(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");
    });
    </script>
    </div>
        <div id='footer'>
    </div></div>

</body>
</html>

Nanozeez 05-12-2014 00:53:34

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

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

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

Pass

Code

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

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

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

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

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

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

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

ดูการเรียกใช้ตามโค้ดเป็นแนวทาง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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:450px;  
        height:500px;  
        margin:auto;  
        margin-top:50px;  
    }  
    </style>      
</head>
<body>
  
  <br>
   <div style="margin:auto:width:80%;">
       <div id="map_canvas"></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 my_Marker=[]; // สำหรับปักหมุด
var obj_marker;  // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล
var limit_show=10; // กำหนดแสดงรายการไม่เกิน
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่  
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด      
var icon=[]; // สำหรับกำหนด รูปให้แต่ละ marker
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: 5, // กำหนดขนาดการ 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  
    
    // ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ json
    $.getJSON( "get_marker.php", function( data ) { 
        obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
        var m=0;
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด
                 if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
                     
                    icon[i] = new GGM.MarkerImage("myfile/"+obj_marker[i].icon,  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ 
                    new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons  
                    new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0  
                    new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)  
                    );                           
                     
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        icon:icon[i],  // แสดงเป็นรูปของแต่ละ marker นั้น
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });     
                     
                     // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                    });             
                     
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง  
//                        infowindow[i] = new GGM.InfoWindow({     
//                          content:$.ajax({     
//                              url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล     
//                              data:'placeID='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
//                              async:false     
//                          }).responseText     
//                        });                           

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
                    GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว  
                        if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่  
                            infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่  
                        }  
                        infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก  
                        infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน  
                    });                                
                    m++;
                 }
                
         });              
    });  
    

    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
    GGM.event.addListener(map, 'zoom_changed', function() {  
        // วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่
        if(my_Marker.length>0){  
            for(i=0;i<my_Marker.length;i++){  
                my_Marker[i].setMap(null);  
            }  
        }  
        var m=0;
        var map_zoom=map.getZoom();
        // zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ
        if(map_zoom<=6){
            limit_show=10;
        }else if(map_zoom<=7){
            limit_show=30;
        }else if(map_zoom<=8){
            limit_show=40;
        }else if(map_zoom<=20){
            limit_show=100;
        }else{
            limit_show=10;
        }
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด
                 if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show

                    icon[i] = new GGM.MarkerImage("myfile/"+obj_marker[i].icon,  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ 
                    new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons  
                    new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0  
                    new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)  
                    );                           
                                          
                     
                     
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        icon:icon[i],  // แสดงเป็นรูปของแต่ละ marker นั้น
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });    

                    // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                    });                             
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง  
//                        infowindow[i] = new GGM.InfoWindow({     
//                          content:$.ajax({     
//                              url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล     
//                              data:'placeID='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
//                              async:false     
//                          }).responseText     
//                        });                           

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
                    GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว  
                        if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่  
                            infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่  
                        }  
                        infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก  
                        infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน  
                    });                                
                    m++;
                 }
         });          
        
    });  
    
  
}  
$(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>

จะมีการกำหนดตัวแปร var icon=[] ด้านบน
และเรียกใช้ตามตัวอย่าง

ส่วนชื่อไฟล์รูป นั้นต้องสัมพันธ์กับข้อมูลที่แสดง ให้ดึงตอนสร้าง get_marker.php ไฟล์ โดยถ้ารูปบันทึกอยู่ในตารางเดียวกับ ข้อมูล latitude และ longitude
ก็สามารถเพิ่ม ค่า icon เข้าไป และดึงค่ามาได้เลย เช่น

<?php
header("Content-type:application/json; 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");   
?>
<?php
$q="SELECT * FROM province_th WHERE 1 ORDER BY province_id";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
	$json_data[]=array(
        "province_id"=>$rs['province_id'],
        "province_name"=>$rs['province_name'],
        "latitude"=>$rs['province_lat'],
        "longitude"=>$rs['province_lon'],
        "icon"=>$rs['province_icon'],
        "zoom"=>$rs['province_zoom']
	);	
}
$json= json_encode($json_data);
echo $json;
?>

แต่ถ้ารูปอยู่คนละตาราง ตารางรูป และตารางข้อมูลพิกัด ต้องมี key หรือฟิลด์ ที่มีความสัมพันธ์กัน
วีธีใช้งาน คือสร้างฟังก์ชั่นไปดึงรูป โดยอ้างอิงจาก id ที่สัมพันธ์ สมมติ รูปอยู่ตาราง picture ข้อมูลพิกัดอยู่
ตาราง province_th สองตารางมี ฟฟิลชื่อ province_id ที่สัมพันธ์กัน แบบนี้เป็นต้น

<?php
header("Content-type:application/json; 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");   
// ฟังก์ชั่นดึงรูป จากตารางที่ สัมพันธ์กัน
function getPicture($id){  // ส่งค่าชื่อรูปออกมาใช้งาน
  return mysql_result(mysql_query("
  SELECT icon FROM picture WHERE province_id='".$id."'
  "),0,0);
}
?>
<?php
$q="SELECT * FROM province_th WHERE 1 ORDER BY province_id";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
	$json_data[]=array(
        "province_id"=>$rs['province_id'],
        "province_name"=>$rs['province_name'],
        "latitude"=>$rs['province_lat'],
        "longitude"=>$rs['province_lon'],
        "icon"=>getPicture($rs['province_id']),
        "zoom"=>$rs['province_zoom']
	);	
}
$json= json_encode($json_data);
echo $json;
?>

ninenik 05-12-2014

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

ขอบคุณมากๆเลยค่ะ ได้แล้ว ๆ ๆ ๆ ขอบคุณมากๆๆๆๆๆๆๆค่ะ

nanozeez 05-12-2014 03:40

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

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

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