PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สอบถามเกี่ยวกับ การดึง Google Map

สอบถามเกี่ยวกับ การดึง Google Map

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>หน้าแรก</title>  
    <style type="text/css">    
    html { height: 100% }    
    body {     
        height:100%;
        width: 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;    
    }    

    h3{
    font-size: 1.5em;
    color: #FFCC66 ;
    /*text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px darkblue;*/
    font-family: Arial, Helvetica, sans-serif;
}
    </style>        
</head>  
<body>
    <div>
    <!--header-->
    <?php include("header.php"); ?>
  </div>
  <div>
    <!--Menu-->
    <?php
  if (!isset($_SESSION)) {
  session_start();
}

  if ($_SESSION["status_user"] != 'admin') {
    include("menu.php");
}else{
    include("menuforadmin.php");
}
?>
  </div>

    <div style="margin:auto:width:80%;">
        <center><h3>หน้าแรก</h3></center> 
        <div id="map_canvas"></div>

        <marquee width="100%" onmouseover="this.scrollAmount=0"onmouseout="this.scrollAmount=1" scrollamount="1" scrolldelay="27" truespeed="true" direction="up"><a href="map.php"> แจ้งเหตุ </a></marquee> 
    </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 ที่เปิดล่าสุด        
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]; 

    //  MapTypeId.ROADMAP  ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน  
//  MapTypeId.SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม  
//  MapTypeId.HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน  
//  MapTypeId.TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ        
    // กำหนด Option ของแผนที่    
    var myOptions = {    
        zoom: 6, // กำหนดขนาดการ 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_place.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({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        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  
                       
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);    
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        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>                
</body>  
</html>  




จากโค้ดด้านบน จะเป็นการดึงข้อมูลจากดาต้าเบสมาแสดงในแผนที่
แต่ภายในแผนที่ ในตัวเลือก ลักษณะแผรที่เป็นแบบในรูป ซึ่งอย่ากได้เป็นแบบแคบปกติ
ซึ่งตอนแรกใช้โค้ดนี้เช่นกันแต่ไม่ได้เป็น แบบนี้ มีวิธีแก้อย่างไรบ้างคร้าบ


โดย:  Aey_yellow IP: 49.228.97.xxx วันที่: 04-07-2016 เวลา: 01:08:45

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
  ไม่เคยเจอเหมือนกัน ถ้าปกติไม่เป็น อาจจะเกี่ยวกับ css หรือเปล่่า

โดย:  Ninenik IP: 183.88.81.xxx วันที่: 04-07-2016