วันเสาร์ที่ 28 เมษายน พ.ศ. 2555

ลองเล่นกับ MM MAP API แผนที่ของคนไทย ไม่แพ้ชาติใดในโลก


      วันนี้ได้ลองเล่น MAP API แผนที่ออนไลน์แบบไทยๆบ้างครับ นั่นคือ MM MAP API ครับ   หลังจากที่หมกมุ่นอยู่กับ Google Maps API  อยู่นาน ไม่รู้ว่าคนไทยเราก็ทำได้ไม่แพ้ใครเลยครับ ขอบอกว่าสุดยอดมากเลยครับ ถึงมีเครื่องไม้เครื่องมือไม่หลากหลายเหมือน Google แต่ก็เพียงพอสำหรับที่จะดึงข้อมูลที่สำคัญออกมาใช้กับโปรเจ็คของเราครับ เช่น ละติจูด , ลองติจูด , ค่าซุม , รายละเอียดที่อยู่ต่างๆ (ซอย,ถนน) ซึ่งผมได้ลองเปรียบเทียบกับแผนที่ในพี่กู๋ดูแล้ว ดูเหมือนว่าจะละเอียดกว่า Google Maps ซะอีกแฮะ ไม่ว่าจะเป็นข้อมูลสถานที่ต่างๆ ที่บอกได้ละเอียดมากเลยครับ ลองอ่านบทความเปรียบเทียบระหว่าง longdo กับ Google ได้ที่เลยครับ ->http://pepzewee.exteen.com/20100412/longdo-map

      MM MAP API เป็นบริการของ Longdo Map  เราสามารถนำข้อมูลแผนที่ของ Longdo Map มาแสดงในหน้าเว็บของเราตามที่ต้องการ เช่น กำหนดตำแหน่งที่ตั้งของสถานที่ โดยที่เราสามารเรียกใช้Methodต่างๆที่ Longdo ได้จัดเตรียมไว้แล้วมาใช้งาน

มาดูโค๊ดที่ผมได้ลองทำกันเลยครับ และลองเอาประยุกต์ดูนะครับ มันจะคล้ายๆกับ Google Maps นะแหละครับ

<!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>mm map api</title>
<style type="text/css">
body{
 font-size:13px;
}
#mmMapDiv {
 left:0px;
 top:0px;
}
</style>
<script type="text/javascript"  src="jquery.js"></script>
<script type="text/javascript"  src="http://mmmap15.longdo.com/mmmap/mmmap.php"></script>
<script type="text/javascript">
  var mmmap;
  function mmMapShow(){
   var mmMapDiv = document.getElementById("mmMapDiv");
   var LatDefault=13.723419,LngDefault=100.476232;
   mmmap = new MMMap(mmMapDiv, LatDefault, LngDefault, 9, "normal");//สร้างอ๊อปเจคแผนที่ในตัวแปร mmap
   $('#lat').html(mmmap.centerLat());
   $('#lng').html(mmmap.centerLong());
   $('#zoomLevel').html(mmmap.getZoom());
   mmmap.setSize(650,400);//กำหนดขนาดแผนที่
   mmmap.rePaint();//วาดขนาด
   mmmap.setMouseMoveHandler(show_Lat_Lng);
  // ตรวจจับเหตุการณ์เมื่อ Mouse เคลื่อนย้ายตำแหน่ง ให้ไปเรียกฟังก์ชั่น show_Lat_Lng ให้ทำงาน
   mmmap.setResolutionChangedHandler(show_Zoom_Level);
  //ตรวจจับเหตุการณ์เมื่อคลิกที่ ซูมเข้า/ซูมออกแผนที่ ให้ไปเรียกฟังก์ชั่น show_Zoom_Level ทำงาน
   mmmap.setMouseWheelHandler(show_Zoom_Level);
  //ตรวจจับเหตุการณ์เมื่อเลื่อนลูกล้อของเม้าส์เพื่อซูมเข้า/ซูมออกแผนที่ ให้ไปเรียกฟังก์ชั่น show_Zoom_Level ทำงาน
   mmmap.getAddressObjectFromLatLon(LatDefault, LngDefault, "th", "address", "generateAddresToText(address)");
  }
  
  function show_Lat_Lng() {
  //ถูกเรียกจากคำสั่งนิ mmmap.setMouseMoveHandler(show_Lat_Lng);
   $('#lat').html(mmmap.centerLat());//นำค่าละติจูดไปแสดง
   $('#lng').html(mmmap.centerLong());//นำค่าลองติจูดไปแสดง
   mmmap.getAddressObjectFromLatLon(mmmap.centerLat(), mmmap.centerLong(), "th", "address", "generateAddresToText(address)");
 //ส่ง object ชื่อ address ไปในฟังก์ชั่นชื่อ generateAddresToText เพื่อดึงค่าที่อยุ่ออกมาแสดง
  };
  function show_Zoom_Level(){
  //ถูกเรียกใช้งานจากคำสั่งนิ  mmmap.setResolutionChangedHandler(show_Zoom_Level); และ mmmap.setMouseWheelHandler(show_Zoom_Level);
   $('#zoomLevel').html(mmmap.getZoom());//นำค่าซูมไปแสดง
  }
  function generateAddresToText(address) {//ดึงข้อมูลของที่อยู่มาแสดงใน รายละเอียด
   if(!address.province) address.province = "-";
   if(!address.amphoe) address.amphoe = "-";
   if(!address.district) address.district = "-";
   if(!address.postcode) address.postcode = "-";
   if(!address.road) address.road = "-";
   if(!address.soi) address.soi = "-";
   $('#detail').html("<p>จังหวัด : " + address.province + "</p>" +
   "<p>อำเภอ/แขวง : " + address.amphoe + "</p>" +
   "<p>ตำบล/เขต : " + address.district + "</p>" +
   "<p>รหัสไปรษณีย์ : " + address.postcode + "</p>" +
   "<p>ถนน : " + address.road + "</p>" +
   "<p>ซอย : " + address.soi + "</p>" +
  "<p>พิกัดทางภูมิศาสตร์ : " + address.geocode
);
}
 $(document).ready(function(){
     mmMapShow();
 });
</script>
</head>
<body>
<table width="955" border="0" align="center">
  <tr>
    <td>
      <div id="mmMapDiv"></div></td>
  </tr>
  <tr>
    <td>
  <p><strong>ละติจูด :</strong> <span id="lat"></span></p>
        <p><strong>ลองติจูด :</strong> <span id="lng"></span></p>
        <p><strong>Zoom Level :</strong> <span id="zoomLevel"></span></p>
        <p><strong>รายละเอียด :</strong> <span id="detail"></span> </p>
 </td>
  </tr>
</table>
</body>
</html>

ศึกษาเพิ่มเติมได้จากที่นี่เลยครับ
คู่มือภาษาไทย http://map.longdo.com/api/docs
ข้อมูลฟังก์ชั่นหรือเมธอดต่างๆและวิธีเรียกใช้ http://map.longdo.com/api/reference
เขียนโดย ที่

1 ความคิดเห็น :

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