PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


อยากทราบวิธีดึงค่า lat log ในฐานข้อมูลมาแสดงในหน้า update polygon

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

อยากทราบวิธีดึงค่า lat log ในฐานข้อมูลมาแสดงในหน้า update polygon
เวลาหนูกดมาที่หน้า update polygon แผนที่ที่เราปักไว้แสดง แต่ค่า lat log ไม่ขึ้นค่ะ


<script type="text/javascript">
/* ส่วนสำหรับการ random ค่าสีและ event */
var COLORS =[
    ["red", "#ff0000"], 
    ["orange", "#ff8800"],
    ["green","#008000"],
    ["blue", "#000080"],
    ["purple", "#800080"]
];
var colorIndex_ = 0;
var listener;
 /* ส่วนของการกำหนดค่า สำหรับคำนวณพื้นที่ */
var earthRadiusMeters=6367460.0;
var metersPerDegree=2.0*Math.PI*earthRadiusMeters/360.0;
var degreesPerRadian=180.0/Math.PI;
var radiansPerDegree=Math.PI/180.0;
var metersPerKm=1000.0;
  
  
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var poly;
var polygon;
var marker=[];
var Points=[];
var path=[];  
var arr_path=[];
function swap_class(buttonId) {
    $("#hand_b").removeClass("selected");
    $("#shape_b").removeClass("selected");
    $("#"+buttonId).addClass("selected");
}
function stopEditing() {
    swap_class("hand_b");
    $("#path_arr").val("");
    $("#distance").val("");
    $("#area_data").val("");
    if(listener!=undefined){
        GGM.event.removeListener(listener);
    }
    if(polygon!=undefined){
        console.log("IN"); 
        path=[];
        console.log("OUT");
        console.log(path);
        polygon.setMap(null);
    }   
    if(marker.length>0){
        for(i=0;i<marker.length;i++){
            marker[i].setMap(null);
        }
    }
}
  
function getColor(named) {
  return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}
  
function getIcon(color) {
  var icon = new GIcon();
  icon.image = "//google.com/mapfiles/ms/micons/" + color + ".png";
  icon.iconSize = new GSize(32, 32);
  icon.iconAnchor = new GPoint(15, 32);
  return icon;
}
  
function startShape(){
        swap_class("shape_b");  
    var color = getColor(true);
    var polygonOptions = {
      strokeColor: color,
      geodesic:true,
      strokeOpacity: 1.0,
      strokeWeight: 3,
      fillColor: color,
      fillOpacity: 0.35
    }
    polygon = new GGM.Polygon(polygonOptions);
    polygon.setMap(map);
     
    startDrawing_polygon(polygon,color);
     
}
function startDrawing_polygon(polygon,color){
        var i=0;
        var Points=[];
        path = polygon.getPath();
        var data_path="";
        listener=GGM.event.addListener(map, 'click', function(event){
            var val_latlng=[event.latLng.lat(),event.latLng.lng()];
//          console.log(val_latlng[0]);
//            console.log(val_latlng[1]);
            path.push(event.latLng);
            Points.push(event.latLng);
             
         
            data_path+=val_latlng[0]+","+val_latlng[1]+"rn";  
            $("#path_arr").val(data_path);
            $("#distance").val(polygon.inKm());
            calculateArea(Points);
          
            // Add a new marker at the new plotted point on the polyline.
            var image="//google.com/mapfiles/ms/micons/"+color+".png";
            marker[i] = new GGM.Marker({
              position: event.latLng,
              title: ""+i,
              draggable:true,
              map: map,
              icon: image
            });  
            GGM.event.addListener(marker[i], 'dragend', function(){  
                path=[];
                var Points=[];
                var data_path="";
                polygon.setPath(path);
                path = polygon.getPath();
                $.each(marker,function(m,n){
                    path.push(marker[m].getPosition());
                    Points.push(marker[m].getPosition());
                    var val_latlng=_.values(marker[m].getPosition());       
                    data_path+=val_latlng[0]+","+val_latlng[1]+"rn";  
                });
                 
                calculateArea(Points);
                $("#path_arr").val(data_path);
                $("#distance").val(polygon.inKm());
                 
            });       
            i++;
             
             
        }); 
   
}
function calculateArea(points) {
    if(points.length>2) {
        var areaMeters2=PlanarPolygonAreaMeters2(points);
        if(areaMeters2>1000000.0) areaMeters2=SphericalPolygonAreaMeters2(points);
        $("#area_data").val(areaMeters2.toFixed(2));
    }
}
function PlanarPolygonAreaMeters2(points) {
    var a=0.0;
    for(var i=0;i<points.length;++i)
        {var j=(i+1)%points.length;
        var xi=points[i].lng()*metersPerDegree*Math.cos(points[i].lat()*radiansPerDegree);
        var yi=points[i].lat()*metersPerDegree;
        var xj=points[j].lng()*metersPerDegree*Math.cos(points[j].lat()*radiansPerDegree);
        var yj=points[j].lat()*metersPerDegree;
        a+=xi*yj-xj*yi;}
    return Math.abs(a/2.0);
}
function SphericalPolygonAreaMeters2(points) {
    var totalAngle=0.0;
    //alert(points[0]);
    for(i=0;i<points.length;++i)
        {var j=(i+1)%points.length;
        var k=(i+2)%points.length;
        totalAngle+=Angle(points[i],points[j],points[k]);}
    var planarTotalAngle=(points.length-2)*180.0;
    var sphericalExcess=totalAngle-planarTotalAngle;
    if(sphericalExcess>420.0)
        {totalAngle=points.length*360.0-totalAngle;
        sphericalExcess=totalAngle-planarTotalAngle;}
    else if(sphericalExcess>300.0&&sphericalExcess<420.0)
        {sphericalExcess=Math.abs(360.0-sphericalExcess);}
    return sphericalExcess*radiansPerDegree*earthRadiusMeters*earthRadiusMeters;
}
function Angle(p1,p2,p3) {
    var bearing21=Bearing(p2,p1);
    var bearing23=Bearing(p2,p3);
    var angle=bearing21-bearing23;
    if(angle<0.0) angle+=360.0;
    return angle;
}
function Bearing(from,to) {
    var lat1=from.lat()*radiansPerDegree;
    var lon1=from.lng()*radiansPerDegree;
    var lat2=to.lat()*radiansPerDegree;
    var lon2=to.lng()*radiansPerDegree;
    var angle=-Math.atan2(Math.sin(lon1-lon2)*Math.cos(lat2),Math.cos(lat1)*Math.sin(lat2)-Math.sin(lat1)*Math.cos(lat2)*Math.cos(lon1-lon2));
    if(angle<0.0) angle+=Math.PI*2.0;
    angle=angle*degreesPerRadian;
    return angle;
}
  
  
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
    draggable: true, // turn off if it gets annoying
    //editable: true,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
    });
    polygon.setMap(map); // นำ polygon ไปแสดงในแผนที่
    google.maps.event.addListener(myPoly.getPath(), 'set_at',   markerCoords);
    google.maps.event.addListener(myPoly.getPath(), 'insert_at',markerCoords);
    google.maps.event.addListener(myPoly.getPath(), 'remove_at',markerCoords);
}
$(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?key=AIzaSyCIMWsOg_xw_6Erc5ybBiaakv6z7SE_yRI&callback=initialize"
    }).appendTo("body");    
});
</script>  

หนูควรทำอย่างไรให้ค่า lat log แสดงในช่องว่างคะ แล้วถ้าค่า lat log ขึ้นแล้วควรส่งค่าไป update ในฐานข้อมูลอย่างไรคะ
ขอบคุณมากๆค่ะ
 


โดย:  Intuorn Janpoom IP: 101.109.129.xxx วันที่: 13-12-2018 เวลา: 16:23:00

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
ดูส่วนเนื้อหาอัพเดทเพิ่มเติมในตอนท้ายของบทความนี้เป็นแนวทาง
 
google map การสร้าง polygon ปักหมุด marker ปรับเปลี่ยนพิกัดได้  http://niik.in/590 
 
โดยส่วนเพิ่มเติม จะรองรับแนวทางเบื้องต้น สำหรับการใช้งาน polygon ทั้งการสร้าง
การบันทึกลงฐานข้อมูล การนำข้อมูลมาแสดง และการแก้ไขข้อมูล รวมทั้งการปรับตำแหน่ง
ในขั้นตอนการแก้ไขข้อมูล
 
ตัวอย่าง
 


 
 
แสดงและแก้ไขข้อมูล
 
 


โดย:  Ninenik IP: 223.24.146.xxx วันที่: 14-12-2018