ช่วยไกด์และแนะนำการเขียนโค้ดทีนะค่ะ[google map]

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ช่วยไกด์และแนะนำการเขียนโค้ดทีนะค่ะ[google map]

ช่วยไกด์และแนะนำการเขียนโค้ดทีนะค่ะ[google map]

คือตอนนี้หนูสร้าง dop down ไว้เพื่อเลือกสถานที่ พอกดปุ่ม ok ปุ๊บ อยากขึ้นจุดที่ต้องการ พร้อมปักหมุดค่ะ

คือควรจะเขียนยังไงดีค่ะ ต้องใช้ภาษาอะไรเขียนค่ะ ทำเป็นเว็บอ่ะค่ะ

View 02-02-2013 03:22:12

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

แสดงแผนที่พร้อมตำแหน่งเริ่มเต้น

สร้างดร็อปดาวน์ ต้องดูค่าในดร็อปดาวน์ ว่าส่งค่า ส่งค่าตำแหน่ง พิกัด ไปไหม
เขียนคำสั่ง javascript หรือใช้ jQuery ตามสะดวก ส่งค่าไปในแผนที่
ให้แผนที่แสดงตำแหน่งตามค่าที่ส่งมา

ลองดูตัวอย่างโค้ด แล้วเอาไปประยุกต์ดู เนื้อหาเรื่องแผนที่ ค่อนข้างละเอียดและยเอะ ถ้าแค่เอาใช้งาน
ให้เน้นประยุกต์ คือไม่ต้องรู้ทั้งหมด ก็อบมาแล้วปรับเป็นจุดๆ ที่ให้รู้ละเอียดใช้เวลา

<!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 - google_map_v3_set_marker_from_list_menu.php</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:550px;
	height:400px;
	margin:auto;
/*	margin-top:100px;*/
}
/* css กำหนดส่วนของการแสดง list menu */
div#list_menu_place{
	width:550px;
	margin:auto;	
}
</style>


</head>

<body>
<br />
<br />
<br />
<div id="list_menu_place">
<!--หาได้จากหน้า https://www.ninenik.com/content.php?arti_id=334-->
เลือกชื่อสถานที่ 
  <select name="name_place_list_menu" id="name_place_list_menu">
  	<option value="">เลือกรายการ</option>
    <option value="15.9717357,102.62162109999997">ขอนแก่น</option>
    <option value="14.7579424,104.47233010000002">ศรีสะเกษ</option>
    <option value="17.7696871,102.75948470000003">หนองคาย</option>
    <option value="18.7964642,98.66005859999996">เชียงใหม่</option>
    <option value="19.8737421,99.72326729999997">เชียงราย</option>                
  </select>
  <input type="button" name="button2" id="button2" value="OK"  />
</div>
<div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">  
  ข้อมูลสถานที่<br />
  <textarea name="place_value" rows="2" id="place_value" style="width:380px;"></textarea>  
    <br />
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" />  
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" />  
    
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <br />
  <br />
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div> 
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var geocoder; // กำหนดตัวแปร สำหรับใช้งานข้อมูลสถานที่จาก Google Map
var my_Marker;
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(18.7964642,98.66005859999996);
	
	// เรียกใช้งานข้อมูล Geocoder ของ Google Map
	geocoder = new GGM.Geocoder();
	
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 7, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	my_Marker = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});
	
	// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
	GGM.event.addListener(my_Marker, "dragend", function() {
		var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker		
		
		// เรียกขอข้อมูลสถานที่จาก Google Map
		geocoder.geocode({"latLng": my_Point}, function(results, status) {
		  if (status == GGM.GeocoderStatus.OK) {
			if (results[1]) {
				// แสดงข้อมูลสถานที่ใน textarea ที่มี id เท่ากับ place_value
			  $("#place_value").val(results[1].formatted_address); // 
			}
		  } else {
			  // กรณีไม่มีข้อมูล
			alert("Geocoder failed due to: " + status);
		  }
		});		
		
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
	});		

	// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
	GGM.event.addListener(map, "zoom_changed", function() {
		$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value 	
	});

}
// ฟังก์ชั่น สำหรับให้แผนทีไปที่จุดตามค่าตำแหน่งที่ส่งมา
function go_to_select_place(placeVal){
//	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM	
//	console.log(placeVal);
	var positionVal=placeVal.split(","); // แยกค่าที่ส่งมาออกเป็นสองค่า คือ lat กับ lon
//	console.log(positionVal);
	var my_Latlng  = new GGM.LatLng(positionVal[0],positionVal[1]);
	map.setCenter(my_Latlng); // กำหนดตำแแน่งตรงกลางแผนที่
	my_Marker.setPosition(my_Latlng); // กำนหดตัวแปน่ง marker
//	map.panTo(my_Latlng);  // ให้แผนที่แสดงไปที่ตัว marker		
}
$(function(){
	// คำสั่งให้ทำเงิน เมื่อกดที่ปุ่ม นk ที่มี id เท่ากับ button2
	$("#button2").click(function(){
		// เอาคาจาก สist menu เข้าฟังก์ชัน go_to_select_place
		go_to_select_place($("select#name_place_list_menu").val()); 
	});
	// โหลด สคริป 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?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

ตัวอย่างผลลัพธ์

เลือกชื่อสถานที่

Ninenik Narkdee 03-02-2013

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

ถ้าหากมีการเก็บข้อมูลลง db มันจะรับค่าได้ยังไงค่ะ ส่วนนี้หนูยัง งงๆอยู่ หรือว่า มันจะไปประมวลผลของมันเองในการวนลูปทำ mark

view 03-02-2013 01:39

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

ถ้ามีการเก็บข้อมูลลง db ก็ต้องใช้ ภาษา php ในการจัดการ

ที่ถามว่า เก็บข้อมูลลง db อันนี้ก็ต้องดูว่า หมายถึงเก็บข้อมูลอะไรลง db

แล้วข้อมูลที่เก็บ เอามาใช้ด้วยไหม ถ้าเอาไปใช้ เอาไปใช้ทำอะไรในแผนที่ไหม

ninenik 03-02-2013

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

หนูเก็บค่าละติจูดลองติดจูดไว้ค่ะ พร้อมกับชื่อสถานที่

หนูรู้แค่ว่าเราต้องเอาค่าละติจูดลองติจูดไปประมวลผลในแผนที่

แต่หนูไม่รูว่าเราจะต้องเขียนมันยังไง คือหนูมือใหม่มากค่ะ หนูเขียนโปรแกรมไม่ค่อยได้

รบกวนพี่ช่วยให้คำตอบหนูทีนะค่ะ หนูติดมา สามวัน แล้วค่ะ ไม่ได้จริงๆ

view 03-02-2013 15:17

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

ถ้ามีข้อมูลอยู่แล้ว ก็เขียนโปรแกรม ดึงข้อมูลมาใช้กับ list menu ได้เลย

ถ้าวิธีเขียนก็แนะนำให้ถามเพื่อน หรือคนที่เขาพอจะรู้ใกล้ๆตัวเอา

ตัวอย่างโค้ตด้านล่างถือว่า สามารถเอาไปประยุกต์ได้เลย

ninenik 03-02-2013

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

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

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