- mark สถานที่หลายจุด
- การ mark สถานที่หลายจุดด้วย marker และ user-defined div
- การ mark สถานที่หลายจุดด้วยการ Tag
- การสร้าง snippet แบบมี tag
คุณสามารถ mark สถานที่หลายจุดบน Longdo map ได้พร้อมกัน
โดยการ mark สถานที่มี 2 รูปแบบดังนี้
- รูปแบบที่ 1 เหมาะกับสถานที่ส่วนตัว
ใช้วิธีการสร้าง marker แบบจุด หรือสร้าง user-defined div ขึ้นมาหลายจุด - รูปแบบที่ 2 เหมาะกับสถานที่สำัคัญ หน่วยงานของรัฐ หน่วยงานเอกชน บริษัท ห้าง ร้าน
ใช้วิีธีการ tag สถานที่
คุณสามารถศึกษาขั้นตอนการ mark สถานที่ทั้งสองรูปแบบ ได้ในหัวข้อถัดไป
การ mark สถานที่หลายจุดด้วย marker และ user-defined div
Listing 1 การสร้าง mark สถานที่แบบหลายจุดโดยการสร้าง marker
<html> <head> <title>Mutiple Marker</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> /*style สำหรับจัดรูปแบบของแผนที่*/ #mmMapDiv{ position:absolute; left:0px; top:0px; } </style> //เพิ่ม MM Map API JavaScript library <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=b88e663af42b0db6d4761f6ac4eadd81"> </script> <script type="text/javascript"> //ตัวแปรเพื่อใช้อ้างอิงไปยัง map object var mmmap; //function initialize สำหรับสร้าง map object และสร้าง marker ขึ้นมา function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.75514, 100.53128, 14, "normal"); //ปรับขนาดของแผนที่ให้กว้าง 600 px และสูง 600 px ด้วย method setSize ของ map object mmmap.setSize(600,600); //เปลี่ยนจุดศูนย์กลางของแผนที่มายังจุดเริ่มต้น mmmap.moveTo(13.75534, 100.53136); //ปรับระดับการ zoom ของแผนที่เป็นค่าเริ่มต้น mmmap.setZoom(14); //ทำการแสดงผลแผนที่ใหม่ เพื่อปรับปรุงการแสดงผลของแผนที่ให้ถูกต้อง mmmap.rePaint(); //สร้าง marker ตำแหน่งบ้านของ Mr A บนแผนที่ด้วย method createMarker ของ map object (mmmap) //และเก็บค่า marker id (ค่าที่ส่งคืนมาจาก method createMarker) ไว้ในตัวแปร markerIdA var markerIdA = mmmap.createMarker(13.75509,100.53177, "Mr A's house","Mr A's house, number 48"); //แสดง popup ตรงตำแหน่ง marker ด้วย method showPopup ของ map object (mmmap) mmmap.showPopUp(13.75509,100.53177, "Mr A's house", "Mr A's house, number 48"); //สร้าง marker ตำแหน่งบ้านของ Ms B บนแผนที่ด้วย method createMarker ของ map object (mmmap) //และเก็บค่า marker id (ค่าที่ส่งคืนมาจาก method createMarker) ไว้ในตัวแปร markerIdB var markerIdB = mmmap.createMarker(13.75493,100.53013, "Ms B's house","Ms B's house, number 60"); //สร้าง marker ตำแหน่งบ้านของ Mr C บนแผนที่ด้วย method createMarker ของ map object (mmmap) //และเก็บค่า marker id (ค่าที่ส่งคืนมาจาก method createMarker) ไว้ในตัวแปร markerIdC var markerIdC = mmmap.createMarker(13.75556, 100.53026, "Mr C's house","Mr C's house, number 99"); } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
ผลลัพธ์
Listing 2 การ mark สถานที่หลายจุดด้วยรูปภาพโดยการสร้าง user-defined div ที่มีูรูปภาพอยู่ภายใน
<html> <head> <title>Mutiple user-defined div</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> /*style สำหรับจัดรูปแบบของแผนที่*/ #mmMapDiv{ position:absolute; left:0px; top:0px; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> <script type="text/javascript"> //ตัวแปรเพื่อใช้อ้างอิงไปยัง map object var mmmap; //function initialize สำหรับสร้าง map object function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.81998, 100.60558, 8, "traffic"); //ปรับขนาดของแผนที่ให้กว้าง 600 px และสูง 600 px ด้วย method setSize ของ map object mmmap.setSize(600,600); //เปลี่ยนจุดศูนย์กลางของแผนที่มายังจุดเริ่มต้น mmmap.moveTo(13.83095, 100.60833); //ปรับระดับการ zoom ของแผนที่เป็นค่าเริ่มต้น mmmap.setZoom(8); //ทำการแสดงผลแผนที่ใหม่ เพื่อปรับปรุงการแสดงผลของแผนที่ให้ถูกต้อง mmmap.rePaint(); //สร้าง user-defined div แบบแสดงข้อความแหน่งบ้านของ Mr A และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivIdA var userDivIdA = createUserDivImage(13.83816, 100.54213, "/sites/default/files/u3/house.png", "Mr A's house, number 48"); //สร้าง user-defined div แบบแสดงรูปภาพตำแหน่งบ้านของ Ms B //และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivIdB var userDivIdB = createUserDivImage(13.86937, 100.65601, "/sites/default/files/u3/house.png", "Ms B's house, number 60"); //สร้าง user-defined div แบบแสดงรูปภาพตำแหน่งบ้านของ Mr C //และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivIdC var userDivIdC = createUserDivImage(13.7699, 100.6145, "/sites/default/files/u3/house.png", "Mr C's house, number 99"); } //function createUserDivImage เพื่อสร้าง user-defined div ที่มีรูปภาพอยู่ภายใน function createUserDivImage(latitude, longitude, imageURL, description){ //สร้าง div element var divElement = document.createElement("div"); //สร้าง img element var imgElement = document.createElement("img"); imgElement.setAttribute("src", imageURL); divElement.appendChild(imgElement); // **** เรียกใช้ method drawCustomDiv ของ map object (mmmap) เพื่อวาด user-defined div ลงบนแผนที่ //และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivId var userDivId = mmmap.drawCustomDiv(divElement,latitude, longitude,description); return userDivId; } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
ผลลัพธ์
การ mark สถานที่หลายจุดด้วย Tag
ไปที่หน้าแรกของ Longdo Map แล้วคลิกที่ login เพื่อไปสู่หน้า login
กรอกข้อมูล username และ password แล้วคลิกที่ปุ่ม login เพื่อเข้าสู่ระบบ
หลังจากนั้นระบบจะเปลี่ยนหน้าปัจจุบันไปเป็นหน้าแรก เริ่มทำการค้นหาสถานที่โดยพิมพ์ชื่อสถานที่ลงในช่อง Search โดยในตัวอย่างนี้ เราจะสร้าง tag ให้กับ dentajoy ระหว่างที่ทำการพิมพ์จะมี keyword อื่นๆ ขึ้นมาช่วยแนะนำ ซึ่งหากมี keyword ตรงกับที่ต้องการปรากฎขึ้น
เราก็สามารถคลิกที่คำนั้นได้เลย จากในตัวอย่างให้คลิกที่ dentajoy
หลังจากนั้นจะมี pop up แสดงขึ้นมาและชี้ไปที่ตำแหน่งที่ตั้งของ dentajoy ให้คลิกที่ปุ่ม detail ที่อยู่ใน pop up
หน้าปัจจุบันจะเปลี่ยนไปเป็นหน้า detail คลิก Edit หลังจากนั้นจะมีช่อง tag ซึ่งแสดง tag keyword ปัจจุบันแสดงขึ้นมา
แก้ไข tag โดยเพิ่มคำว่า dentajoy เว้นวรรคคำด้วยจุลภาค (comma)
เลื่อน scrollbar ลงมาล่างสุด กดปุ่ม submit เพื่อบันทึกข้อมูล เราสามารถเพิ่ม tag ด้วย keyword เดียวกันให้กับสถานที่อื่นได้อีก ตัวอย่างเช่น เพิ่ม tag keyword dentajoy ใ้ห้กับ dentajoy สาขาอื่นๆ
หลักจากที่ได้เพิ่ม tag เข้าไป เราสามารถใช้ tag keyword นี้ค้นหาสถานที่ได้ด้วยการพิมพ์ข้อความ tag: xxxxx ลงในช่อง Search โดยที่ xxxxx คือ tag keyword ซึ่งในตัวอย่างนี้คือ dentajoy ผลลัพธ์จากการค้นหาจะเป็น icon รูป red cross แสดงตำแหน่งของ dentajoy สาขาต่างๆ
การสร้าง snippet แบบมี tag
ที่หน้าแรกของ Longdo map เลือกบริเวณที่จะแสดงตำแหน่งของสถานที่ และระดับการ zoom ของแผนที่ตามที่ต้องการ
หลังจากนั้นคลิกที่ "สร้าง Snippet"
จะเข้าสู่หน้าเพื่อทำการสร้าง Snippet คลิกที่ปุ่ม Generate HTML Code!
เลื่อน scrollbar ลงมาด้านล่าง จะได้ผลลัพธ์ของ HTML code ออกมา ทำการ copy HTML code เฉพาะค่าของ attribute source
นำค่าที่ copy มาไปวางในช่อง address bar ของ web browser เิพิ่ม &tag=xxxxx และ &mode=yyyyy โดยที่ xxxxx คือ tag keyword และ mode คือ รูปแบบการแสดงผลของแผนที่ โดยในที่นี้ tag กำหนดเป็น dentajoy และ mode กำหนดเป็น traffic ผลลัพธ์ที่ได้ใน web browser จะเป็นการแสดงตำแหน่งของ dentajoy โดยผู้ใช้สามารถนำ url นี้ไปใช้ใน website ของตนเองหรือนำไปประยุกต์ใช้ต่อได้