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

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

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

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

/* ส่วนสำหรับการ 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 13-12-2018 16:23:00

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ดูส่วนเนื้อหาอัพเดทเพิ่มเติมในตอนท้ายของบทความนี้เป็นแนวทาง

google map การสร้าง polygon ปักหมุด marker ปรับเปลี่ยนพิกัดได้ http://niik.in/590

https://www.ninenik.com/content.php?arti_id=590 via @ninenik

โดยส่วนเพิ่มเติม จะรองรับแนวทางเบื้องต้น สำหรับการใช้งาน polygon ทั้งการสร้าง

การบันทึกลงฐานข้อมูล การนำข้อมูลมาแสดง และการแก้ไขข้อมูล รวมทั้งการปรับตำแหน่ง

ในขั้นตอนการแก้ไขข้อมูล

ตัวอย่าง

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

ninenik 14-12-2018

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

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

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