ลองเล่นกับ 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
ไม่เจ่ง
ตอบลบ