PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map

13 September 2010 By


จากเนื้อหา บทความ

http://www.ninenik.com/Google_map_API_v.3_กับ_jQuery_ลากจุดหา_พิกัด_ค่า_latitude_และ_longitude_-326.html

และ

http://www.ninenik.com/ค้นหา_พิกัด_ค่า_latitude_และ_longitude_ใน_Google_Map_จากฃื่อสถานที่-327.html

ทั้งสองกรณี เป็นการค้นหา พิกัด latitude และ longitude ตรั้งละหนึ่งสถานที่ หรือหนึ่งตำแหน่ง เท่านั้น อย่างไรก็ตาม เพื่ออำนวยความสะดวกยิ่งขึ้น จะแนะนำการประยุกต์ เนื้อหาจาก บทความ

ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่
http://www.ninenik.com/ค้นหา_พิกัด_ค่า_latitude_และ_longitude_ใน_Google_Map_จากฃื่อสถานที่-327.html

มาใช้ในการหาตำแหน่งจาก ชื่อสถานที่ คราวละมากๆ โดยเพียงแค่เรากรอกชื่อสถานที่ และขึ้นบรรทัดใหม่ สำหรับแต่ละชื่อ แล้วให้ google ค้นหา พิกัด ค่า latitude และ longitude ให้โดยอัตโนมัติ (การกรอกชื่อสถานที่ แนะนำไม่ควรเกิน 100 ชื่อในแต่ละครั้ง)

ทดสอบโดย ลองเข้าไปก็อบชื่อจังหวัดในประเทศไทย ตามลิ้ง ล่างนี้
http://www.ninenik.com/note/thaiprovince.txt

จากนั้นนำมาวาง และค้นหา ในเครื่องมือด้านล่าง รอผลลัพธ์สักครู่ google จะทำการหาตำแหน่ง
พิกัดให้เรา เราสามารถนำข้อมูลที่ได้ไปบันทึกลงฐานข้อมูล หรือประยุกต์อื่นๆ ต่อไปได้ตามต้องการ

 

ตัวอย่างโค้ด

<!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:550px;
	height:200px;
	margin:auto;
	margin-top:50px;
}
</style>
</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
Search Place
<br />
<textarea name="namePlace" cols="40" rows="5" id="namePlace" style="width:500px;"></textarea>
<br />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />    
    

<hr />    
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
        ชื่อสถานที่,Latitude,Longitude,Zoom<br />
    <textarea name="resultData" cols="40" rows="5" id="resultData" style="width:500px;"></textarea>
     <br />
     <input type="submit" name="button" id="button" value="บันทึก" />  
    พบ
    <input name="YesVal" type="text" id="YesVal" style="width:25px;" value="0" />
  ไม่พบ 
  <input name="NoVal" type="text" id="NoVal" style="width:25px;" value="0" />
  ค้นแล้ว
  <input name="FinishVal" type="text" id="FinishVal" style="width:25px;" value="0" />
  จากทั้งหมด
  <input name="TotalVal" type="text" id="TotalVal" style="width:25px;" value="0" />
  </form>      
    



</div> 
  
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object
	// กำหนดจุดเริ่มต้นของแผนที่
	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 , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
}
$(function(){
	// ส่วนของฟังก์ชันค้นหาชื่อสถานที่ในแผนที่
	var searchPlace=function(){ // ฟังก์ชัน สำหรับคันหาสถานที่ ชื่อ searchPlace
		var AddressSearch=$("#namePlace").val();// เอาค่าจาก textbox ที่กรอกมาไว้ในตัวแปร
		var arr_AddressSearch=AddressSearch.split(/rn|r|n/); 
		var length_AddressSearch=arr_AddressSearch.length;
		$("#TotalVal").val(length_AddressSearch);						
		if(geocoder && $.trim(AddressSearch)!=""){ // ตรวจสอบว่าถ้ามี Geocoder Object 
			$("#resultData").val("Google กำลังทำการค้นหา กรุณารอสักครู่...");		
			$("#YesVal").val(0);
			$("#NoVal").val(0);
			$("#FinishVal").val(0);
			var zoomVal=map.getZoom();
			var resultValue='';
			var i=0;
			var YesData=0;
			var NoData=0;
			getLatLon();
			function getLatLon(){
		//		console.log(i);
				geocoder.geocode({
					 address: $.trim(arr_AddressSearch[i]) // ให้ส่งชื่อสถานที่ไปค้นหา
				},function(results, status){ // ส่งกลับการค้นหาเป็นผลลัพธ์ และสถานะ
					if(status == GGM.GeocoderStatus.OK) { // ตรวจสอบสถานะ ถ้าหากเจอ
						var my_Point=results[0].geometry.location; // เอาผลลัพธ์ของพิกัด มาเก็บไว้ที่ตัวแปร
							resultValue+=$.trim(arr_AddressSearch[i])+","
							+my_Point.lat()+","+my_Point.lng()+","+zoomVal+"rn";
							YesData++;
							$("#YesVal").val(YesData);
							$("#FinishVal").val(i+1);
							if(i<length_AddressSearch){
								setTimeout(function(){
									incr();	
								},1000);
							}
					}else{
							resultValue+=$.trim(arr_AddressSearch[i])+","
							+0+","+0+","+zoomVal+"rn";	
							NoData++;
							$("#NoVal").val(NoData);
							$("#FinishVal").val(i+1);							
							if(i<length_AddressSearch){
								setTimeout(function(){
									incr();	
								},1000);
							}					
					 }
				});	
								
			}
			function incr(){
				i++;
				if(i<length_AddressSearch){
					getLatLon();
				}else{
					$("#resultData").val(resultValue);	
				}
			}
		}
	}
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace ให้ทำงานฟังก์ฃันค้นหาสถานที่
		searchPlace();	// ฟังก์ฃันค้นหาสถานที่
	});

});
$(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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

 


Tags:: เครื่องมือ ชื่อสถานที่ google map ค้นหาพิกัด





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