วันศุกร์ที่ 14 สิงหาคม พ.ศ. 2558

ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่1

http://www.ninenik.com/%E0%B8%84%E0%B9%89%E0%B8%99%E0%B8%AB%E0%B8%B2_%E0%B8%9E%E0%B8%B4%E0%B8%81%E0%B8%B1%E0%B8%94_%E0%B8%84%E0%B9%88%E0%B8%B2_latitude_%E0%B9%81%E0%B8%A5%E0%B8%B0_longitude_%E0%B9%83%E0%B8%99_Google_Map_%E0%B8%88%E0%B8%B2%E0%B8%81%E0%B8%83%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%AA%E0%B8%96%E0%B8%B2%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-327.html




ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่

10 September 2010 By 


จากเนื้อหาบทความ
การค้นหาพิกัด โดยการลากตัว marker เพื่อหาตำแหน่ง อาจจะไม่ได้รับความสะดวก ดังนั้นการค้นหาจากสถานที่
จะเป็นวิธีที่ช่วยลดเวลาในการหาพิกัดได้เป็นอย่างดี 
ตัวอย่างโค้ดและคำอธิบายแสดงไว้ในตัวโค้ดแล้ว  ถ้าใครมีไอเดีย การประยุกต์ใช้งาน สามารถแนะนำไว้ที่ comment
ด้านล่าง หากเป็นแนวทาง หรือเป็นไอเดียที่เป็นประโยฃน์ จะได้นำเอามาประยุกต์และนำเสนอในโอกาส ต่อๆ ไป









ข้อมูลแผนที่ ©2015 Google

แผนที่
ดาวเทียม
Search Place  
Latitude  Longitude  Zoom  
ตัวอย่างโค้ด
แสดงปกติพิมพ์โค้ดนี้?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>Google Map API 3 - 01</title>  
  7. <style type="text/css">  
  8. html { height: 100% }  
  9. body {   
  10.     height:100%;  
  11.     margin:0;padding:0;  
  12.     font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;  
  13.     font-size:12px;  
  14. }  
  15. /* css กำหนดความกว้าง ความสูงของแผนที่ */  
  16. #map_canvas {   
  17.     width:550px;  
  18.     height:400px;  
  19.     margin:auto;  
  20.     margin-top:50px;  
  21. }  
  22. </style>  
  23.   
  24.   
  25. </head>  
  26.   
  27. <body>  
  28.   <div id="map_canvas"></div>  
  29.  <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">    
  30. <!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->  
  31. Search Place   
  32.   <input name="namePlace" type="text" id="namePlace" size="40" />  
  33.   <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />  
  34.   <hr />  
  35. <!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->  
  36.   <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">    Latitude    
  37.     <input name="lat_value" type="text" id="lat_value" value="0" size="17" />    
  38.     Longitude    
  39.     <input name="lon_value" type="text" id="lon_value" value="0" size="17" />    
  40.   Zoom    
  41.   <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />    
  42.   <input type="submit" name="button" id="button" value="บันทึก" />    
  43.   </form>    
  44. </div>   
  45.     
  46. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>  
  47. <script type="text/javascript">  
  48. var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด  
  49. var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
  50. var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker  
  51. var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
  52. function initialize() { // ฟังก์ชันแสดงแผนที่  
  53.     GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
  54.     geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object  
  55.     // กำหนดจุดเริ่มต้นของแผนที่  
  56.     var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
  57.     var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง  
  58.     // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
  59.     var my_DivObj=$("#map_canvas")[0];  
  60.     // กำหนด Option ของแผนที่  
  61.     var myOptions = {  
  62.         zoom: 13, // กำหนดขนาดการ zoom  
  63.         center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng  
  64.         mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId  
  65.     };  
  66.     map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
  67.       
  68.     my_Marker = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker  
  69.         position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
  70.         map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
  71.         draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้  
  72.         title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
  73.     });  
  74.       
  75.     // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร     
  76.     GGM.event.addListener(my_Marker, 'dragend', function() {  
  77.         var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
  78.         map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker          
  79.         $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value  
  80.         $("#lon_value").val(my_Point.lng());  // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value   
  81.         $("#zoom_value").val(map.getZoom());  // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu            
  82.     });       
  83.   
  84.     // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
  85.     GGM.event.addListener(map, 'zoom_changed', function() {  
  86.         $("#zoom_value").val(map.getZoom());   // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value      
  87.     });  
  88.   
  89. }  
  90. $(function(){  
  91.     // ส่วนของฟังก์ชันค้นหาชื่อสถานที่ในแผนที่  
  92.     var searchPlace=function(){ // ฟังก์ชัน สำหรับคันหาสถานที่ ชื่อ searchPlace  
  93.         var AddressSearch=$("#namePlace").val();// เอาค่าจาก textbox ที่กรอกมาไว้ในตัวแปร  
  94.         if(geocoder){ // ตรวจสอบว่าถ้ามี Geocoder Object   
  95.             geocoder.geocode({  
  96.                  address: AddressSearch // ให้ส่งชื่อสถานที่ไปค้นหา  
  97.             },function(results, status){ // ส่งกลับการค้นหาเป็นผลลัพธ์ และสถานะ  
  98.                 if(status == GGM.GeocoderStatus.OK) { // ตรวจสอบสถานะ ถ้าหากเจอ  
  99.                     var my_Point=results[0].geometry.location; // เอาผลลัพธ์ของพิกัด มาเก็บไว้ที่ตัวแปร  
  100.                     map.setCenter(my_Point); // กำหนดจุดกลางของแผนที่ไปที่ พิกัดผลลัพธ์  
  101.                     my_Marker.setMap(map); // กำหนดตัว marker ให้ใช้กับแผนที่ชื่อ map                     
  102.                     my_Marker.setPosition(my_Point); // กำหนดตำแหน่งของตัว marker เท่ากับ พิกัดผลลัพธ์  
  103.                     $("#lat_value").val(my_Point.lat());  // เอาค่า latitude พิกัดผลลัพธ์ แสดงใน textbox id=lat_value  
  104.                     $("#lon_value").val(my_Point.lng());  // เอาค่า longitude พิกัดผลลัพธ์ แสดงใน textbox id=lon_value   
  105.                     $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu                                 
  106.                 }else{  
  107.                     // ค้นหาไม่พบแสดงข้อความแจ้ง  
  108.                     alert("Geocode was not successful for the following reason: " + status);  
  109.                     $("#namePlace").val("");// กำหนดค่า textbox id=namePlace ให้ว่างสำหรับค้นหาใหม่  
  110.                  }  
  111.             });  
  112.         }         
  113.     }  
  114.     $("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace ให้ทำงานฟังก์ฃันค้นหาสถานที่  
  115.         searchPlace();  // ฟังก์ฃันค้นหาสถานที่  
  116.     });  
  117.     $("#namePlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา  
  118.         if(event.keyCode==13){  //  ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter ให้เรียกฟังก์ชันค้นหาสถานที่  
  119.             searchPlace();      // ฟังก์ฃันค้นหาสถานที่  
  120.         }         
  121.     });  
  122.   
  123. });  
  124. $(function(){  
  125.     // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว  
  126.     // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api  
  127.     // v=3.2&sensor=false&language=th&callback=initialize  
  128.     //  v เวอร์ชัน่ 3.2  
  129.     //  sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false  
  130.     //  language ภาษา th ,en เป็นต้น  
  131.     //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize    
  132.     $("<script/>", {  
  133.       "type": "text/javascript",  
  134.       src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
  135.     }).appendTo("body");      
  136. });  
  137. </script>    
  138. </body>  
  139. </html>  
แนวทางการค้นหาสถานที่ ให้ได้ผลลัพธ์ ที่ตรงกับความต้องการ
การค้นหาจังหวัด เฃ่น จ.ขอนแก่น
การค้นหาอำเภอ เช่น อ.เมืองขอนแก่น
การค้นหาอำเภอ เช่น อ.เมือง จ.ขอนแก่น หรือ จ.ขอนแก่น อ.เมือง
การค้นหาตำบล เช่น จ.ขอนแก่น ต.ในเมือง หรือ จ.ขอนแก่น อ.เมืองขอนแก่น ต.ในเมือง
การค้นหาชื่อสถานที่ เช่น
จ.ขอนแก่น อ.เมืองขอนแก่น บึงแก่นนคร
ประสาทเขาพระวิหาร
ดอยสุเทพ
โรงเรียนวัดเทพลีลา
เขตบางกะปิ the mall
ตำแหน่งใน google map อาจไม่ตรง 100 % แต่ถือว่าได้ตำแหน่งที่เหมาะสม และสามารถหาเพิ่มเติม
จากแผนที่โดยตรง การค้นหาบางสถานที่ ชื่อซ้ำกัน จำเป็นต้องกำหนดขอบเขต เช่น จ. หรือ อ. หรือ ต. อะไร
ในกรุงเทพ ก็กำหนด เขต เป็นต้น




โค้ดจากตัวอย่าง มีการใช้งานไฟล์ ่jquery ที่เป็นเวอร์ชั่นเก่า 

แสดงปกติพิมพ์โค้ดนี้?
  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>    

ให้เปลี่ยนเป็นเวอร์ชั่นใหม่ที่เราโหลดมา หรือ ใช้ไฟล์จาก google แทนด้วยโค้ดต่อไปนี้แทน

แสดงปกติพิมพ์โค้ดนี้?
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      



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









Author 
2015 © Copyright ninenik.com. All rights reserved.
เขียนโดย ที่
ป้ายกำกับ:

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)