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

วิธีนำค่า lat lng จากฐานข้อมูลมาแสดงเป็นหมุดตำแหน่งบนแผนที่ ทำยังไงครับ

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา วิธีนำค่า lat lng จากฐานข้อมูลมาแสดงเป็นหมุดตำแหน่งบนแผนที่ ทำยังไงครับ

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

วิธีนำค่า lat lng จากฐานข้อมูลมาแสดงเป็นหมุดตำแหน่งบนแผนที่ ทำยังไงครับ

ตอนนี้ นำค่า lat lng ลงฐานข้อมูลได้แล้ว แต่ไม่รุ้วิธีนำมาแสดง รบกวนช่วยด้วยครับ

Boomzaclub 18-08-2015 14:21:50

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

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

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

Pass

Code

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

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

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

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

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

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

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

ลองหาดูในลิ้งค์นี้ดู

https://www.ninenik.com/google_search.php?tags=google map

ninenik 18-08-2015

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

ผมยังดูไม่ออกเลยครับ ผมดูไม่ออกว่าอันไหนมันจะคล้ายๆ ของผม ผมไม่เข้าใจเกี่ยวกับ Javascript เลยครับ พอดีได้ทำโปรเจคเกี่ยวกับแผนที่อะครับ แต่ไม่ไหวเลยครับ Java ผมงงมาก ช่วยดูให้ทีครับ

นี่โค้ดที่ผมนำค่า lat lng ลงฐานข้อมูลโดยการลากเม้าเพื่อหาจุดพิกัดครับ แล้วบันทึกลงฐานข้อมูลได้แล้วครับ เหลือแต่การนำมาแสดง ต้องทำยังไงครับ

<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(15.23006651292215,104.85728949308395);
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 10, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	var my_Marker = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});
	GGM.event.addListener(my_Marker, 'dragend', function() {
		var my_Point = my_Marker.getPosition();
        map.panTo(my_Point);
        $("#lat_value").val(my_Point.lat());
        $("#lng_value").val(my_Point.lng());
        $("#zoom_value").val(map.getZoom());
	});		
	GGM.event.addListener(map, 'zoom_changed', function() {
		$("#zoom_value").val(map.getZoom());
	});

}
$(function(){
	$("<script/>", { "type": "text/javascript",
	  src: "//maps.google.com/maps/api/js?key=AIzaSyDBq03x1U9s1ekqp6TgAKUgXsOHVzcyrxM&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>

Boomzaclub 18-08-2015 20:20

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

อันนี้น่าจะใกล้เคียง แต่สุดท้ายต้องประยุกต์เอาอีกที

สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์
https://www.ninenik.com/content.php?arti_id=336 via @ninenik

ninenik 18-08-2015

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

ขอบคุณครับ

Boomzaclub 20-08-2015 15:32

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

ผมนำค่าออกมาแสดงได้แล้วครับ แต่ติดปัญหาตรง นี้ครับ

// กำหนดจุดเริ่มต้นของแผนที่

var my_Latlng = new GGM.LatLng(15.23006651292215,104.85728949308395);

ตรงสีแดงที่มากไว้นั้น จะเป็นจุดโฟกัส เริ่มต้อนของแผนที่ใช้ไหมครับ คือมันไม่ตรงกับหมุดอะครับ หมุดอยู่อีกที่ แต่โฟกัสเริ่มมาก็ไม่เจอหมุดอะครับ
มีวิธีนำค่าไปใส่ตรงนั้น ยังไงครับ เพื่อให้หมุด เป็นจุดโฟกัสตรงกลางตอนเริ่มต้นพอดีอะครับ

Boomzaclub 20-08-2015 20:58

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

นี่โค้ดที่ผมประยุกต์ครับ แสดงหมุดที่ตรงกับค่าในฐานข้อมูล แต่ไม่โฟกัสตรงกับหมุดครับ กำหนด ตรง center มีวิธีนำค่าไปใส่ไหมครับ


<!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>Google Map API 3 - 01</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>
  <div id="map_canvas"></div>
 <script type="text/javascript" src="../JavaScript/Maps_jQuery_API-v3.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(15.23006651292215,104.85728949308395);
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
		var myOptions = {
		zoom: 10, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
$.ajax({
		url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
		dataType: "xml",
		success:function(xml){
			$(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
					var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน	
					var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน	
					var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน	
					var markerLng=$(this).find("longitude").text();	// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน			
					var markerLatLng=new GGM.LatLng(markerLat,markerLng);
					var my_Marker = new GGM.Marker({ // สร้างตัว marker
						position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
						draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
						map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
						title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
					});
				//	console.log($(this).find("id").text());
			});
		}
	});	
}
$(function(){
	$("<script/>", { "type": "text/javascript",
	  src: "//maps.google.com/maps/api/js?key=AIzaSyDBq03x1U9s1ekqp6TgAKUgXsOHVzcyrxM&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>
</body>
</html>

Boomzaclub 20-08-2015 21:11

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

ลองใช้จุดของ marker เป็นจุดกลางดู แต่คงจะเลือกตำแหน่งกลางจริงๆ ไม่ได้

โค้ดตัวอย่าง จะใช้ marker ตัวแรกเป็นจุดกลาง

    $.ajax({  
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml  
        dataType: "xml",  
        success:function(xml){  
            var usePosition=null;
            $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
                    var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                    var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                    var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน              
                    var markerLatLng=new GGM.LatLng(markerLat,markerLng);  
                    if(usePosition==null){
                        usePosition=markerLatLng;
                    }
                    var my_Marker = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });  
                //  console.log($(this).find("id").text());  
            });  
            //map.setZoom(8);
            map.setCenter(usePosition);            
        }  
    });

ninenik 21-08-2015

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

ได้แล้วครับ ขอบคุณมากๆครับ

Boomzaclub 24-08-2015 23:36

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

อยากทราบวิธีด้วยคะ ช่วยแนะนำหน่อยคะ

Janeii Noonsong 10-03-2016 17:06

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

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

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