สอนการใช้ Map API ร่วมกับ Vue js สร้างแผนที่ออนไลน์บน Web Application

Vue.js เป็น Framework ที่ใช้อย่างแพร่หลายในปัจจุบัน เนื่องจากที่ขึ้นโปรเจคง่าย และสามารถต่อยอดจาก JavaScript ที่เราคุ้นเคยกัน บทความนี้เราเลยจะมาอธิบายวิธีการใช้ Vue ร่วมกับ Map API โดยพื้นฐานกันครับ

Longdo Map API กับ Vue js

Longdo Map เป็นแผนที่ออนไลน์คนไทย ที่ให้บริการแก่นักพัฒนาในการนำแผนที่ไปใช้ในเว็บแอปพลิเคชันมานาน จึงได้ปล่อย Longdo Map Vue component ออกมาให้ใช้กัน

ซึ่งเว็บ Tutorial ของ Longdo Map API เอง ก็ใช้ Vue เช่นกันนะ : ) ดังภาพด้านล่าง

วันนี้เลยอยากแนะนำวิธีนำไปใช้เบื้องต้นกันครับ​ มีหัวข้อเรื่อง ดังนี้

1. Installation
2. Usage
3. Example
4. Components

สามารถดูเพิ่มเติมที่: Longdo Map Vue – Github

---

1. การติดตั้ง (installation)

หลังที่เราได้ติดตั้ง vue เรียบร้อยแล้ว ให้ใช้คำสั่ง npm ด้านล่างเพื่อติดตั้ง

npm i longdo-map-vue

2. การเรียกใช้งาน (usage)

อันดับแรก นักพัฒนาต้องมี KEY API สำหรับเรียก API ก่อน สมัครฟรีได้ที่ Longdo Map API key.

เมื่อได้คีย์มาแล้ว ท่านสามารถเรียกใช้ Map component บน Vue project ได้
มีด้วยกัน 2 แบบ

แบบที่ 1 => global component ที่ทำให้ใช้แผนที่ได้กับทุกที่ ในโปรเจคของท่าน (แนะนำ)

ใส่โค้ดด้านล่างนี้ ในไฟล์ main.js หรือไฟล์ที่เกี่ยวข้อง:

import Vue from 'vue' 
import LongdoMap from 'longdo-map-vue' 

Vue.use(LongdoMap, {     
       load: {         
            apiKey: 'YOUR_LONGDO_MAP_API_KEY'     
       } 
})

หลังจากนั้น ท่านสามารถใช้ <longdo-map/> ใน component template ได้

<template>     
   <longdo-map/> 
</template>

ตัวอย่างการสร้างผลด้วย Vue.js

แบบที่ 2 => local component

ยกตัวอย่างเช่น ใน component file ชื่อ Foo.vue

<template>     
   <longdo-map/> 
</template>

import { LongdoMap } from 'longdo-map-vue'
LongdoMap.init({ apiKey:'YOUR_LONGDO_MAP_API_KEY' })

export default {
    name: 'Foo',
    components: {    
       LongdoMap   
    }
}

ท่านสามารถที่จะนำเข้า component อื่นๆ เพิ่มเติมตามต้องการได้อีก เช่น

import { LongdoMap, LongdoMapMarker } from 'longdo-map-vue'

3. ลองมาดูวิธีใช้กัน (Example)

3.1 เพิ่มรูปทรงหลายเหลี่ยม (Polygon) ไปยัง Longdo Map:

<template>     
    <longdo-map>         
       <longdo-map-polygon             
           :location="locationList"             
           :lineWidth="2"             
           :lineColor="'rgba(0, 0, 0, 1)'"
           :fillColor="'rgba(255, 0, 0, 0.4)'"/>     
    </longdo-map>
</template>

export default {
     data() {
         return {
             locationList: [
                 { lon: 99, lat: 14 },
                 { lon: 100, lat: 13 },
                 { lon: 102, lat: 13 },
                 { lon: 103, lat: 14 }
             ]
         }
     }
 }

ผลลัพธ์ที่ได้

3.2 เพิ่มหมุดจำนวนมากบนแผนที่

<template>     
    <longdo-map :zoom="10" :lastView="false">         
        <longdo-map-marker             
            v-for="(item, i) in markers"             
            :key="i"             
            :location="item.location"
            :title="item.title"             
            :detail="item.detail"     
        />     
    </longdo-map> 
</template>

export default {
  data() {
    return {
      markers: [
        {
          location: { lon: 100.58, lat: 13.761 },
          title: "Vue Marker",
          detail: "This is a detail"
        }
      ]
    };
  }
};

ผลลัพธ์ที่ได้

4. Components

ยังมีการสร้าง Overlay หลายๆ แบบ ที่รองรับการทำงานแบบข้างต้น เช่น

• longdo-map props
• longdo-map-marker props
• longdo-map-dot props
• longdo-map-circle props
• longdo-map-rectangle props
• longdo-map-polyline props
• longdo-map-polycurve props
• longdo-map-polygon props

*** และยังมีคำสั่งบางอย่างที่ต้องอ้างอิงจาก JavaScript API เดิมอยู่ โดยจะมีวิธีใช้ดังตัวอย่างด้านล่างนี้ เช่น การดักจับเหตุการณ์บนแผนที่ (Event)

Event Map API ในรูปแบบ JavaScript API:

map.Event.bind('location', function() {
  var location = map.location(); // Cross hair location
  console.log(location);
});

เปลี่ยนตัวอย่าง มาเป็นแบบ Vue Component

<longdo-map 
   @load="test" 
   :zoom="10" 
   :lastView="false">
</longdo-map>

methods:{
     test(map) {
         map.Event.bind('', function(){
             //do somethings
        }) 
     }
 }

ตัวอย่างการใช้แบบของจริง

ศึกษาเพิ่มเติม: Longdo Map JavaScript API documentation

---

หากต้องการใช้กับ Nuxt จะมีขั้นตอนตามนี้เลย

1. ทำการติดตั้ง Longdo Map Vue library ด้วยคำสั่ง npm

npm i longdo-map-vue

2. สร้างไฟล์ longdo-map-vue.client.js ในโฟลเดอร์ plugins (ถ้าไม่มีโฟลเดอร์ให้สร้างใหม่ที่ root ของ project) และใส่

import Vue from 'vue'
import LongdoMap from 'longdo-map-vue'

Vue.use(LongdoMap, {
  load: {
    apiKey: 'YOUR_API_KEY',
  },
})

3. ที่ไฟล์ nuxt.config.js ให้เพิ่ม

export default {
  plugins: ['~/plugins/longdo-map-vue.client.js']
}

4. ไฟล์ Vue สามารถใช้งานได้ตามเดิมข้างต้นเลย

<template>
  <client-only>
    <longdo-map />
  </client-only>
</template>

เป็นอันเสร็จสิ้น การเรียกใช้ Longdo Map ด้วย Nuxt Framework เรียบร้อย

---

สรุป

นักพัฒนาสามารถเลือกได้ว่า เราจะสร้าง Object แผนที่ครั้งเดียว แล้วนำไปใช้ในทุกๆ Components หรือสร้างแบบแยกหน้ากันไปเลย ขึ้นอยู่กับโจทย์ของระบบแต่ละท่านนั่นเอง

สะดวกมากๆ ครับ อยากให้ “ลองดู” : )