ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map
13 September 2010จากเนื้อหา บทความ
และ
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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
29 Jul 10 สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่น อ่าน 4295 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 9070 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 5265 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 5349 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Attribute อ่าน 3797 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10700 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 8026 11 Sep 10 กำหนด แก้ไข เปลี่ยนแปลง รูปแบบ ประเภท ของ แผนที่ map types ใน google map อ่าน 2436 13 Oct 10 สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map อ่าน 2554 13 Oct 08 คำสั่ง SQL ORDER BY อ่าน 9116 12 Nov 08 กำหนด permission ไฟล์หรือโฟลเดอร์ด้วยฟังก์ชัน FTP ใน PHP อ่าน 2137 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 3045 17 Mar 09 สร้างฟังก์ชันลบเวลาด้วย php อย่างง่าย อ่าน 2527 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 2462 13 Oct 08 คำสั่ง SQL IN อ่าน 3414 30 Oct 10 การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด อ่าน 11027 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 2371 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 4403 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 12 Sep 10 จัดรูปแบบ NavigationControlOptions ใน Google Map อ่าน 1857