back | source
การสร้าง Overlays
  1. การสร้าง longdo.Marker object
    (ในตัวอย่างจะสร้าง Marker อยู่ 3 ประเภท)
    var marker1 = new longdo.Marker({ lon: 99, lat: 13 });
    var marker2 = new longdo.Marker({ lon: 101.2, lat: 12.8 },
    {
      title: 'Marker',
      icon: {
        url: 'http://map.longdo.com/mmmap/images/pin_mark.png',
        offset: { x: 12, y: 45 }
      },
      detail: 'Drag me',
      visibleRange: { min: 7, max: 8 },
      draggable: true
    });
    var marker3 = new longdo.Marker({ lon: 101, lat: 12 },
    {
      title: 'Custom marker',
      icon: {
        html: 'icon',
        offset: { x: 18, y: 21 }
      }
    });
    คำอธิบาย
    • lon,lat คือ ค่าลองจิจูดและ ค่าละติจูด
    • title คือ ข้อความที่แสดงในส่วนหัวข้อใน Popup
    • detail คือ ข้อความที่แสดงรายละเอียดต่างๆ ใน Popup
    • icon คือ รูปภาพที่แสดงอยู่บนแผนที่
    • url คือ ตำแหน่งที่อยู่ของไฟล์รูปภาพบนเว็บที่จะใช้เป็น Overlays
    • visibleRange คือ ระยะการ zoom ที่สามารถมองเห็น icon นี้ได้
    • html คือ การสร้าง html เพื่อใช้เป็น Overlays
    • offset คือ จุดที่วัดจากตำแหน่งขวาและบนของจุดเริ่มต้น
    ตัวอย่าง
  2. การสร้าง longdo.Popup object
    (ในตัวอย่างจะสร้าง Popup อยู่ 2 ประเภท)
    var popup1 = new longdo.Popup({ lon: 99, lat: 14 },
    {
      title: 'Popup',
      detail: 'Simple popup'
    });
    var popup2 = new longdo.Popup({ lon: 101, lat: 14 },
    {
      title: 'Popup',
      detail: 'Popup detail...',
      size: { width: 200, height: 200 },
      closable: true
    });
    คำอธิบาย
    • lon,lat คือ ค่าลองจิจูดและ ค่าละติจูด
    • title คือ ข้อความที่แสดงในส่วนหัวข้อใน Popup
    • detail คือ ข้อความที่แสดงรายละเอียดต่างๆ ใน Popup
    • size คือ ขนาดของ Popup
    • closable คือ การแสดงปุ่มปิดหน้าจอ Popup มี 2 ค่าคือ true, false
    ตัวอย่าง
  3. การใช้ Overlays
    map.Overlays.add(marker1);
    คำอธิบาย
    • add() คือ การเพิ่ม Marker หรือ Popup ลงบนแผนที่
  4. การลบ Overlays ของ Marker, Popup
    // Remove Marker
    map.Overlays.remove(marker1);
    
    // Remove Popup
    map.Overlays.remove(popup1);
    
    // Clear all
    map.Overlays.clear();
    คำอธิบาย
    • remove() คือ การลบ Overlays ออกจากแผนที่
    • clear() คือ การลบ Overlays ทั้งหมด
    ตัวอย่าง
^top