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

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
google map เครื่องมือ ค้นหาพิกัด ชื่อสถานที่

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

ดูแล้ว 12,875 ครั้ง


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

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

และ

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

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

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

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

ทดสอบโดย ลองเข้าไปก็อบชื่อจังหวัดในประเทศไทย ตามลิ้ง ล่างนี้
https://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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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







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