PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map

29 March 2010 By


สร้างฟอร์ม สำหรับดึงค่า พิกัด ค่า latitude,  longitude และค่า zoom จาก google map สำหรับบันทึก
ตำแหน่งของสถานที่ โดยอาศัย การลากตำแหน่งตัว remark ในแผนที่ google map ไปยังจุด หรือตำแหน่ง
ที่ต้องการ โดยจะมี ค่า input text 3 ตัว เพื่อรับค่า latitude,  longitude และค่า zoom เมื่อได้ค่าที่ต้องการ
สามารถนำไปบันทึกลงฐานข้อมูล หรือ นำไปใช้ใน การกำหนดจุดสถานที่ ใน google map api ต่อไปได้

ตัวอย่าง

Latitude Longitude Zoom

HTML Code ตัวอย่าง

<!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></title>
<style type="text/css">
html{
	padding:0px;
	margin:0px;
}
div#map_canvas{
	margin:auto;
	width:600px;
	height:550px;
	overflow:hidden;
}
</style>

</head>

<body>

<div id="map_canvas">
</div> 

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRQIRG6yKtEoODg8BfMKCyHqWgeYjhTbSKxVXskDpcNKx0i7Msr1-E1jhg" type="text/javascript"></script>
<script type="text/javascript"> 
function initialize() { 
  if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("map_canvas")); 
	var center = new GLatLng(13.77436,100.53458); // การกำหนดจุดเริ่มต้น
	map.setCenter(center, 13);  // เลข 13 คือค่า zoom  สามารถปรับตามต้องการ 
	map.setUIToDefault(); 
	
	var marker = new GMarker(center, {draggable: true});  
    map.addOverlay(marker);
	 
	GEvent.addListener(marker, "dragend", function() {
		var point = marker.getPoint();
		map.panTo(point);

		$("#lat_value").val(point.lat());
		$("#lon_value").val(point.lng());
		$("#zoom_value").val(map.getZoom());

	});	 
	 
  } 
} 
</script> 
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	initialize();
	$(document.body).unload(function(){
			GUnload();
	});
});
</script>
<div id="showDD" style="margin:auto;padding-top:5px;width:600px;">
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
    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" />
  <input type="submit" name="button" id="button" value="บันทึก" />
  </form>
</div>
</body>
</html>

 


Tags:: google map



เนื้อหาส่วนนี้อาจจะไม่เป็นปัจจุบัน เก่าแล้ว แนะนำให้ ศึกาษาได้ที่ คลิก

http://www.ninenik.com/content.php?arti_id=326

ซึ่งเป็นเนื้อหาที่ใหม่กว่า และไม่ต้องใช้ api key




URL สำหรับอ้างอิง