back | source
การค้นหาสถานที่
  1. ตัวอย่างนี้ใช้ชุดคำสั่งใหม่ของ HTML5 ในการทำงาน ควรเปิดตัวอย่างนี้ด้วย Firefox/ Chrome เวอร์ชั่นล่าสุดหรือ IE 10 ขึ่นไป
  2. สร้างกล่อง div และตั้งชื่อ (id) เพื่อใช้เป็น Placeholder ของข้อมูลการ Search
    //ส่วน HTML
    <div id="result" style="position: absolute; top: 0; right: 0; width: 400px; padding: 4px; border: 4px solid #dddddd; background: #ffffff; z-index: 2;"></div>
    
    //ส่วน Javascript
    map.Search.placeholder(
        document.getElementById('result')
    );
  3. สร้าง Text Input Box ต่างๆ (eg. #search) เพื่อใช้เก็บ keyword, Options และปุ่ม submit สำหรับส่งค่า
  4. ตัวอย่าง Function doSearch();
    var 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,
        limit: document.getElementById('limit').value,
        span: document.getElementById('span').value,
      });
    }
    คำอธิบาย
    map.Search.search(KEYWORD, OPTIONS);
    • KEYWORD: คำที่จะใช้ค้นหา
    • OPTIONS: Objects ที่ประกอบไปด้วย
      • area: รหัส geocode เป็นตัวเลข 2-6 หลัก ระบุถึงจังหวัด อำเภอ หรือ ตำบลในประเทศไทย ตัวอย่างเช่น 10 หมายถึงกรุงเทพฯ, 1007 หมายถึงเขตปทุมวัน, 100704 หมายถึงแขวงลุมพินี เขตปทุมวัน
      • tag: หมวดหมู่ในการค้นหา เช่น โรงแรม, โรงเรียน, โรงพยาบาล เป็นต้น
      • limit: จำนวนผลลัพธ์ที่ต้องการ
      • span: ขอบเขตของการค้นหา เช่น 100m, 1000km เป็นต้น
    map.Search.language(LANGUAGE); //กำหนดภาษา th หรือ en
    ดาวน์โหลด geocode

การทำ Suggest
  1. สร้าง Event oninput ให้กล่อง #search เพื่อเรียก suggest
    search.oninput = function() {
      if (search.value.length < 3) return;
      map.Search.suggest(search.value)
    };
  2. ใช้วิธีการ Bind Event 'suggest' และนำ argument result ไปแสดงผล
    var suggest = document.getElementById('suggest');
    
    map.Event.bind('suggest', function(result) {
      suggest.innerHTML = '';
      for (var i = 0; i < result.data.length; i++) {
        longdo.Util.append(suggest, 'option', {
          value: result.data[i].w
        });
      }
    });
^top
keyword: language:
area: tag: limit: span: