อยากทราบวิธีดึงค่า lat log ในฐานข้อมูลมาแสดงในหน้า update polygon
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากทราบวิธีดึงค่า lat log ในฐานข้อมูลมาแสดงในหน้า update polygon
อยากทราบวิธีดึงค่า lat log ในฐานข้อมูลมาแสดงในหน้า update polygon
Copy
เวลาหนูกดมาที่หน้า 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 ในฐานข้อมูลอย่างไรคะ
ขอบคุณมากๆค่ะ
หนูควรทำอย่างไรให้ค่า lat log แสดงในช่องว่างคะ แล้วถ้าค่า lat log ขึ้นแล้วควรส่งค่าไป update ในฐานข้อมูลอย่างไรคะ
ขอบคุณมากๆค่ะ

คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ