การค้นหาสถานที่
- สร้างกล่อง div และตั้งชื่อ (id) เพื่อใช้เป็น Placeholder ของข้อมูลการ Search
//ส่วน HTML <div id="result"></div> //ส่วน Javascript map.Search.placeholder( document.getElementById('result') );
- สร้าง Text Input Box ต่างๆ (eg. #search) เพื่อใช้เก็บ keyword, Options และปุ่ม submit สำหรับส่งค่า
- ตัวอย่าง Function doSearch();
search = document.getElementById('search'); //หากมีการกด Enter ที่ #search search.onkeyup = function(event) { if((event || window.event).keyCode != 13) return; doSearch(); } function doSearch() { map.Search.search(search.value, { area: document.getElementById('area').value, tag: document.getElementById('tag').value, span: document.getElementById('span').value, limit: document.getElementById('limit').value }); suggest.style.display = 'none'; }
รูปแบบการใช้งานmap.Search.search(KEYWORD, OPTIONS);
- KEYWORD: คำที่จะใช้ค้นหา
- OPTIONS: Objects ที่ประกอบไปด้วย
- area: รหัส geocode เป็นตัวเลข 2-6 หลัก ระบุถึงจังหวัด อำเภอ หรือ ตำบลในประเทศไทย ตัวอย่างเช่น 10 หมายถึงกรุงเทพฯ, 1007 หมายถึงเขตปทุมวัน, 100704 หมายถึงแขวงลุมพินี เขตปทุมวัน
- tag: หมวดหมู่ในการค้นหา เช่น โรงแรม, โรงเรียน, โรงพยาบาล เป็นต้น
- span: ขอบเขตของการค้นหา เช่น 100m, 1000km เป็นต้น
- limit: จำนวนผลลัพธ์ที่ต้องการ
- การกำหนดภาษา
map.Search.language(LANGUAGE);
- LANGUAGE: กำหนดภาษา th หรือ en
รายการ geocode
การทำ Suggest
- สร้าง Event oninput ให้กล่อง #search เพื่อเรียก suggest
search.oninput = function() { if (search.value.length < 3) { suggest.style.display = 'none'; return; } map.Search.suggest(search.value, { area: document.getElementById('area').value }); };
- ใช้วิธีการ Bind Event 'suggest' และนำ argument result ไปแสดงผล
suggest = document.getElementById('suggest'); map.Event.bind('suggest', function(result) { if (result.meta.keyword != search.value) return; suggest.innerHTML = ''; for (var i = 0, item; item = result.data[i]; ++i) { longdo.Util.append(suggest, 'a', { innerHTML: item.d, href: 'javascript:doSuggest(\'' + item.w + '\')' }); } suggest.style.display = 'block'; }); function doSuggest(value) { search.value = value; doSearch(); }